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

    <t t-name="discuss.CallSettings">
        <ActionPanel t-if="props.withActionPanel" title.translate="Voice settings" icon="'fa fa-gear'">
            <t t-call="discuss.CallSettings.content" />
        </ActionPanel>
        <t t-else="" t-call="discuss.CallSettings.content" />
    </t>

    <t t-name="discuss.CallSettings.content">
        <div class="o-discuss-CallSettings d-flex flex-column">
            <h4>Voice</h4>
            <label class="d-flex align-items-baseline mb-2" title="Microphone" aria-label="Microphone">
                <span class="flex-shrink-0 pe-2">
                    Microphone
                </span>
                <div class="flex-grow-1"/>
                <DeviceSelect kind="'audioinput'"/>
            </label>
            <label class="d-flex align-items-baseline mb-2" title="Audio Output" aria-label="Audio Output">
                <span class="flex-shrink-0 pe-2">
                    Audio Output
                </span>
                <div class="flex-grow-1"/>
                <DeviceSelect kind="'audiooutput'"/>
            </label>
            <div class="d-flex flex-column">
                <button class="btn d-flex my-1" t-att-class="{'bg-300' : !store.settings.use_push_to_talk }" t-on-click="()=>this.store.settings.setPushToTalk(false)">
                    <input class="form-check-input" type="radio" t-att-checked="store.settings.use_push_to_talk ? '' : 'checked'"/>
                    <span class="text-start flex-grow-1 mx-3">Voice Detection</span>
                </button>
                <button class="btn d-flex my-1" t-att-class="{'bg-300' : store.settings.use_push_to_talk }" t-on-click="()=>this.store.settings.setPushToTalk(true)">
                    <input class="form-check-input" type="radio" t-att-checked="store.settings.use_push_to_talk ? 'checked' : ''"/>
                    <span class="text-start flex-grow-1 mx-3">Push to Talk</span>
                </button>
                <span t-if="store.settings.use_push_to_talk and !isMobileOS and !pttExtService.isEnabled" class="small text-muted fst-italic mb-3" t-out="pttExtService.downloadText"/>
            </div>
            <div class="d-flex flex-column">
                <t t-if="!store.settings.use_push_to_talk">
                    <span class="me-2 my-1">Voice detection sensitivity</span>
                    <div class="d-flex align-items-center w-100 h-100">
                        <button class="btn btn-primary" t-on-click="microphoneVolume.toggle" t-att-disabled="!microphoneVolume.isReady">
                            <div class="position-relative">
                                <span class="d-flex invisible text-nowrap">
                                    <t t-out="testText.length > stopText.length ? testText : stopText"/>
                                </span>
                                <span class="position-absolute start-0 top-0">
                                    <t t-if="microphoneVolume.isActive" t-out="stopText"/>
                                    <t t-else="" t-out="testText"/>
                                </span>
                            </div>
                        </button>
                        <label class="w-100 d-flex ms-2" title="Voice detection sensitivity" aria-label="Voice detection sensitivity">
                            <input class="o-Discuss-CallSettings-thresholdInput form-range rounded" t-attf-style="--volume: {{microphoneVolume.value * 100}}%;" type="range" min="0.001" max="1" step="0.001" t-model="store.settings.voiceActivationThreshold" t-on-input="store.settings.saveVoiceThresholdDebounce"/>
                        </label>
                    </div>
                </t>
                <div t-if="store.settings.use_push_to_talk" class="d-flex" t-att-class="{'flex-column': props.isCompact}">
                    <div t-if="!isMobileOS" class="d-flex flex-column align-items-center" t-att-class="{'me-1 w-50': !props.isCompact}">
                        <label class="d-flex flex-column align-items-start flex-wrap w-100" title="Push-to-talk key" aria-label="Push-to-talk key">
                            <span class="me-2 my-1 text-truncate text-wrap">Push-to-talk key</span>
                            <span class="d-flex border border-2 rounded w-100" t-attf-class="{{ store.settings.isRegisteringKey ? 'border-danger' : 'border-primary' }}">
                                <span t-if="store.settings.push_to_talk_key" class="ms-1 px-3 fs-3 flex-grow-1" t-esc="pushToTalkKeyText"/>
                                <button class="btn btn-link px-2 py-0 text-black" t-on-click="onClickRegisterKeyButton">
                                    <i t-if="store.settings.isRegisteringKey" title="Cancel" aria-label="Cancel" class="fa fa-2x fa-times-circle"/>
                                    <i t-else="" title="Register new key" aria-label="Register new key" class="fa fa-2x fa-keyboard-o"/>
                                </button>
                            </span>
                        </label>
                    </div>
                    <div class="d-flex align-items-center" t-att-class="{'ms-1 w-50': !props.isCompact}">
                        <label class="d-flex flex-column align-items-start flex-wrap h-100 w-100" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
                            <span class="me-2 my-1 text-truncate text-wrap">Delay after releasing push-to-talk</span>
                            <div class="d-flex w-100 align-items-center">
                                <input class="flex-grow-1 form-range" type="range" min="0" max="2000" step="1" t-att-value="store.settings.voice_active_duration" t-on-input="onChangeDelay"/>
                                <span class="p-1 text-end"><t t-out="store.settings.voice_active_duration"/>ms</span>
                            </div>
                        </label>
                    </div>
                </div>
                <span t-if="store.settings.isRegisteringKey">Press a key to register it as the push-to-talk shortcut.</span>
            </div>
            <hr class="o-discuss-separator my-2"/>
            <h4>Video</h4>
            <label class="d-flex align-items-baseline mb-2" title="Camera" aria-label="Camera">
                <span class="flex-shrink-0 pe-2">
                    Camera
                </span>
                <div class="flex-grow-1"/>
                <DeviceSelect kind="'videoinput'"/>
            </label>
            <div class="d-flex flex-column my-1">
                <t t-call="discuss.CallSettings.textToggler">
                    <t t-set="text">Show video participants only</t>
                    <t t-set="value" t-value="store.settings.showOnlyVideo"/>
                    <t t-set="onchange" t-value="onChangeShowOnlyVideo"/>
                </t>
            </div>
            <div t-if="store.settings.hasCanvasFilterSupport" class="d-flex flex-column my-1">
                <t t-call="discuss.CallSettings.textToggler">
                    <t t-set="text">Blur video background</t>
                    <t t-set="value" t-value="store.settings.useBlur"/>
                    <t t-set="onchange" t-value="onChangeBlur"/>
                </t>
            </div>
            <t t-if="store.settings.useBlur">
                <div class="d-flex mt-1" t-att-class="{'flex-column': props.isCompact}">
                    <div class="d-flex flex-column align-items-center" t-att-class="{'me-1 w-50': !props.isCompact}">
                        <label class="d-flex flex-column align-items-start flex-wrap w-100" title="Background blur intensity" aria-label="Background blur intensity">
                            <span class="me-2 text-truncate text-wrap">Background blur intensity</span>
                            <div class="d-flex w-100 flex-grow-1 align-items-center">
                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.backgroundBlurAmount" t-on-change="onChangeBackgroundBlurAmount"/>
                                <span class="p-1 text-end o-discuss-DiscussCallSettings-width-text-percentage"><t t-out="Math.floor(store.settings.backgroundBlurAmount * 5)"/>%</span>
                            </div>
                        </label>
                    </div>
                    <div class="d-flex align-items-center" t-att-class="{'ms-1 w-50': !props.isCompact}">
                        <label class="d-flex flex-column align-items-start flex-wrap h-100 w-100" title="Edge blur intensity" aria-label="Edge blur intensity">
                            <span class="me-2 text-truncate text-wrap">Edge blur intensity</span>
                            <div class="d-flex w-100 flex-grow-1 align-items-center">
                                <input class="flex-grow-2 form-range" type="range" min="0" max="20" step="1" t-att-value="store.settings.edgeBlurAmount" t-on-change="onChangeEdgeBlurAmount"/>
                                <span class="p-1 text-end o-discuss-DiscussCallSettings-width-text-percentage"><t t-out="Math.floor(store.settings.edgeBlurAmount * 5)"/>%</span>
                            </div>
                        </label>
                    </div>
                </div>
            </t>
            <hr class="o-discuss-separator my-2"/>
            <h4>Technical Settings</h4>
            <t t-if="env.debug">
                <div class="d-flex flex-column my-1">
                    <t t-call="discuss.CallSettings.textToggler">
                        <t t-set="text">Log RTC events</t>
                        <t t-set="value" t-value="store.settings.logRtc"/>
                        <t t-set="onchange" t-value="onChangeLogRtc"/>
                    </t>
                </div>
            </t>
            <button class="btn btn-secondary mt-1 mb-2 w-100" t-on-click="onClickDownloadLogs">Download logs</button>
        </div>
    </t>
    <t t-name="discuss.CallSettings.textToggler">
        <div class="d-flex flex-wrap align-items-center">
            <label class="d-flex align-items-center flex-wrap mw-100" t-att-title="text" t-att-aria-label="text">
                <span class="text-truncate text-wrap" t-out="text"></span>
            </label>
            <div class="flex-grow-1"/>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" t-on-change="onchange" t-att-checked="value ? 'checked' : ''" t-att-title="text" t-att-aria-label="text"/>
            </div>
        </div>
    </t>

</templates>
