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

    <t t-name="discuss.NotificationSettings">
        <ActionPanel title.translate="Notification Settings" resizable="!!env.inMeetingView" initialWidth="400" icon="'fa fa-bell'">
            <div class="o-discuss-NotificationSettings">
                <t t-if="props.thread.self_member_id?.mute_until_dt">
                    <button class="btn w-100 d-flex p-1 opacity-75 border-0" t-on-click="()=>this.setMute(false)">
                        <div class="d-flex flex-column flex-grow-1 px-2 py-1 w-100 rounded">
                            <span class="fs-6 fw-bold text-wrap text-start text-break">Unmute Conversation</span>
                            <span class="fw-normal smaller text-start" t-out="store.settings.getMuteUntilText(props.thread.self_member_id?.mute_until_dt)"/>
                        </div>
                    </button>
                </t>
                <div class="d-flex">
                    <Dropdown position="ui.isSmall ? 'bottom-end' : 'right-start'" menuClass="'o-mail-NotificationSettings-submenu my-0 ' + store.discussDropdownMenuClass(this)">
                        <button class="btn w-100 d-flex p-1 opacity-75 border-0">
                            <div class="d-flex flex-grow-1 align-items-center px-0 py-1 w-100 rounded">
                                <span class="text-wrap text-start text-break">Mute Conversation</span>
                                <div class="o-discuss-NotificationSettings-separator flex-grow-1"/>
                                <i class="oi oi-arrow-right ms-2 me-1"/>
                            </div>
                        </button>
                        <t t-set-slot="content">
                            <t t-foreach="store.settings.MUTES" t-as="mute" t-key="mute.label">
                                <DropdownItem class="'o-mail-NotificationSettings-muteDuration btn rounded-0 d-flex align-items-center px-2 py-2 m-0'" onSelected="()=>this.setMute(mute.value)"><button class="btn p-0 mx-2 text-wrap text-start text-break" t-out="mute.name"/></DropdownItem>
                            </t>
                        </t>
                    </Dropdown>
                </div>
                <t t-if="props.thread.channel_type === 'channel'">
                    <hr class="solid mx-1 my-2"/>
                    <button class="btn d-flex w-100 p-0 border-0" t-on-click="() => store.settings.setCustomNotifications(false, props.thread)">
                        <div class="d-flex flex-grow-1 align-items-center px-2 rounded">
                            <div class="d-flex flex-column align-items-start">
                                <span class="fs-6 text-wrap text-start text-break">Use Default</span>
                                <span class="fw-bolder o-xsmaller ps-2 o-discuss-NotificationSettings-defaultValue"><t t-out="store.settings.NOTIFICATIONS.find((n) => n.label === store.settings.channel_notifications).name"/></span>
                            </div>
                            <div class="o-discuss-NotificationSettings-separator flex-grow-1"/>
                            <input class="form-check-input shadow-sm" type="radio" t-att-checked="!props.thread.self_member_id?.custom_notifications"/>
                        </div>
                    </button>
                    <t t-foreach="store.settings.NOTIFICATIONS" t-as="notif" t-key="notif.label">
                        <button class="btn w-100 d-flex p-0 border-0" t-on-click="() => store.settings.setCustomNotifications(notif.label, props.thread)">
                            <div class="d-flex flex-grow-1 align-items-center px-2 py-1 rounded">
                                <span class="fs-6 fw-normal text-wrap text-start text-break" t-esc="notif.name"/>
                                <div class="o-discuss-NotificationSettings-separator flex-grow-1"/>
                                <input class="form-check-input ms-2 shadow-sm" type="radio" t-att-checked="props.thread.self_member_id?.custom_notifications === notif.label"/>
                            </div>
                        </button>
                    </t>
                </t>
            </div>
        </ActionPanel>
    </t>

</templates>
