<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

    <t t-name="mail.DiscussNotificationSettings">
        <div class="o-mail-DiscussNotificationSettings d-flex flex-column">
            <div class="d-flex flex-column my-1">
                <label class="cursor-pointer d-flex align-items-center">
                    <h5>Mute all conversations</h5>
                    <div class="flex-grow-1"/>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" t-att-checked="store.settings.mute_until_dt" t-on-change="onChangeDisplayMuteDetails"/>
                    </div>
                </label>
                <span class="mt-1 text-muted small">Muting prevents unread indicators and notifications from appearing.</span>
            </div>
            <label t-if="store.settings.mute_until_dt" class="d-flex align-items-baseline my-1">
                <div class="d-flex flex-column">
                    <h6 class="flex-shrink-0 mb-1">Mute duration</h6>
                    <span class="text-muted smaller" t-esc="store.settings.getMuteUntilText(store.settings.mute_until_dt)"/>
                </div>
                <div class="flex-grow-1"/>
                <select class="form-select w-auto d-flex" t-on-change="onChangeMuteDuration">
                    <option value="default">Select duration</option>
                    <t t-foreach="store.settings.MUTES" t-as="mute" t-key="mute.label">
                        <option t-att-value="mute.value" t-esc="mute.name" t-att-selected="mute.value === state.selectedDuration"/>
                    </t>
                </select>
            </label>
            <hr class="o-discuss-separator my-1"/>
            <div class="d-flex flex-column my-1">
                <h5>Channel Notifications</h5>
                <span class="mb-1 text-muted small">This setting will be applied to all channels using the default notification settings.</span>
                <t t-foreach="store.settings.NOTIFICATIONS" t-as="notif" t-key="notif.label">
                    <button class="btn d-flex my-1" t-att-class="{'o-selected' : notif.label === store.settings.channel_notifications}" t-on-click="()=> this.store.settings.setCustomNotifications(notif.label)">
                        <input class="form-check-input" type="radio" t-att-checked="notif.label === store.settings.channel_notifications"/>
                        <div class="d-flex flex-column text-start flex-grow-1 mx-3">
                            <span t-esc="notif.name"/>
                        </div>
                    </button>
                </t>
            </div>
        </div>
    </t>
</templates>
