<div id="notification-settings" class="settings-section" data-name="notifications">
    <form class="notification-settings-form">
        <div class="notification-reminder tip">{{#tr this }}Notifications are triggered when a message arrives and Zulip isn't in focus or the message is offscreen.{{/tr}}</div>

        <h3 class="inline-block">{{t "Stream messages" }}</h3>
        <div class="alert-notification" id="stream-notify-settings-status"></div>
        <p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" class="inline-block" name="enable_stream_desktop_notifications"
                       id="enable_stream_desktop_notifications"
                       {{#if page_params.enable_stream_desktop_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_stream_desktop_notifications" class="inline-block">
                {{t "Visual desktop notifications" }}
            </label>
            <div class="propagate_stream_notifications_change"></div>
        </div>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" class="inline-block" name="enable_stream_sounds" id="enable_stream_sounds"
                       {{#if page_params.enable_stream_sounds}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_stream_sounds" class="inline-block no-border">
                {{t "Audible desktop notifications" }}
            </label>
            <div class="propagate_stream_notifications_change"></div>
        </div>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" class="inline-block" name="enable_stream_push_notifications" id="enable_stream_push_notifications"
                       {{#if page_params.enable_stream_push_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_stream_push_notifications" class="inline-block no-border">
                {{t "Mobile notifications" }}
            </label>
            <div class="propagate_stream_notifications_change"></div>
        </div>

        <p class="notification-settings-note">
            {{#tr this}}Change notification settings for individual streams on your <a href="/#streams">Streams page</a>.{{/tr}}
        </p>

        <h3 class="inline-block">{{t "Private messages and @-mentions" }}</h3>
        <div class="alert-notification" id="pm-mention-notify-settings-status"></div>
        <p>{{t "I want:" }}</p>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
                       {{#if page_params.enable_desktop_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_desktop_notifications" class="inline-block">
                {{t "Visual desktop notifications" }}
            </label>
        </div>

        <div class="input-group disableable {{#unless page_params.enable_desktop_notifications}}control-label-disabled{{/unless}}">
            <label class="checkbox">
                <input type="checkbox" name="pm_content_in_desktop_notifications"
                          id="pm_content_in_desktop_notifications"
                       {{#unless page_params.enable_desktop_notifications}}disabled="disabled"{{/unless}}
                       {{#if page_params.pm_content_in_desktop_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="pm_content_in_desktop_notifications" id="pm_content_in_desktop_notifications_label" class="inline-block">
                {{t "Include content of private messages" }}
            </label>
        </div>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" name="enable_sounds" id="enable_sounds"
                       {{#if page_params.enable_sounds}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_sounds" class="inline-block">
                {{t "Audible desktop notifications" }}
            </label>
        </div>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
                       {{#if page_params.enable_offline_email_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_offline_email_notifications" class="inline-block">
                {{t "Email notifications when offline" }}
            </label>
        </div>

        <div class="input-group">
            <label class="checkbox">
                <input type="checkbox" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
                       {{#if page_params.enable_offline_push_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_offline_push_notifications" class="inline-block">
                {{t "Mobile notifications when offline" }}
            </label>
        </div>

        <div class="input-group disableable {{#unless page_params.enable_offline_push_notifications}}control-label-disabled{{/unless}}">
            <label class="checkbox">
                <input type="checkbox" name="enable_online_push_notifications" id="enable_online_push_notifications"
                       {{#unless page_params.enable_offline_push_notifications}}disabled="disabled"{{/unless}}
                       {{#if page_params.enable_online_push_notifications}}
                       checked="checked"
                       {{/if}} />
                <span></span>
            </label>
            <label for="enable_online_push_notifications" id="enable_online_push_notifications_label" class="inline-block">
                {{t "Mobile notifications always (even when online)" }}
            </label>
        </div>

        <div id="other_notifications">

            <h3 class="inline-block">{{t "Other notification settings" }}</h3>
            <div class="alert-notification" id="other-notify-settings-status"></div>
            <div class="input-group no-margin" id="digest_container">
                <label class="checkbox">
                    <input type="checkbox" name="enable_digest_emails" id="enable_digest_emails"
                           {{#if page_params.enable_digest_emails}}
                           checked="checked"
                           {{/if}} />
                    <span></span>
                </label>
                <label for="enable_digest_emails" class="inline-block">
                    {{t "Send digest emails when I'm away" }}
                </label>
            </div>
            <div class="input-group {{#unless page_params.enable_offline_email_notifications}}control-label-disabled{{/unless}}">
                <label class="checkbox">
                    <input type="checkbox" name="message_content_in_email_notifications"
                              id="message_content_in_email_notifications"
                           {{#unless page_params.enable_offline_email_notifications}}disabled="disabled"{{/unless}}
                           {{#if page_params.message_content_in_email_notifications}}
                           checked="checked"
                           {{/if}} />
                    <span></span>
                </label>
                <label for="message_content_in_email_notifications" id="message_content_in_email_notifications_label" class="inline-block">
                    {{t "Include message content in missed message emails" }}
                </label>
            </div>
            <div class="input-group" id="realm_name_in_notifications_container">
                <label class="checkbox">
                    <input type="checkbox" name="realm_name_in_notifications" id="realm_name_in_notifications"
                           {{#if page_params.realm_name_in_notifications}}
                           checked="checked"
                           {{/if}} />
                    <span></span>
                </label>
                <label for="realm_name_in_notifications" class="inline-block">
                    {{t "Include organization name in subject of missed message emails" }}
                </label>
            </div>

            {{!-- If we end up removing the last control group, make sure to change
            $("#digest_container").hide(); in settings_notifications.js to
            $("#other_notifications").hide();
            --}}
        </div>
    </form>

</div>
