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

    <t t-name="discuss.CallDeviceSelect">
        <Dropdown
            disabled="!isPermissionGranted(props.kind)"
            openOnMouseEnter="false"
        >
            <button
                t-if="isPermissionGranted(props.kind)"
                t-attf-class="o-mail-DeviceSelect-button btn btn-secondary o-dropdown-caret min-w-0 {{ env.inDialog ? 'w-50' : 'w-100' }}"
                t-att-data-kind="props.kind"
             >
                <i t-if="props.icon" t-att-class="props.icon"/>
                <span
                    class="pe-2 text-start text-truncate"
                    t-attf-class="{{ props.icon ? 'ps-2' : '' }}"
                    t-esc="selectLabel || BROWSER_DEFAULT"/>
            </button>
            <button
                t-else=""
                t-attf-class="o-mail-DeviceSelect-button btn btn-secondary d-flex align-items-center {{ env.inDialog ? 'w-50' : 'w-100' }}"
                t-att-data-kind="props.kind"
                t-on-pointerdown.prevent="() => this.showPermissionDialog(props.kind)"
                t-on-keydown.prevent="() => this.showPermissionDialog(props.kind)"
            >
                <i t-if="props.icon" t-att-class="props.icon"/>
                <span
                    class="text-truncate flex-grow-1"
                    t-attf-class="{{ props.icon ? 'ps-2' : '' }}"
                    t-out="PERMISSION_NEEDED"/>
            </button>
            <t t-set-slot="content">
                <DropdownItem t-if="!isBrowserChrome or props.kind === 'videoinput'" class="{ 'active': isSelected() }" onSelected="(ev) => this.onSelectAudioDevice(ev)">
                    <t t-esc="BROWSER_DEFAULT"/>
                </DropdownItem>
                <t t-foreach="state.userDevices" t-as="device" t-key="device_index">
                    <DropdownItem t-if="device.kind === props.kind" class="{ 'active': isSelected(device.deviceId) }" onSelected="(ev) => this.onSelectAudioDevice(ev, { device })">
                        <t t-esc="device.label || 'device ' + device_index"/>
                    </DropdownItem>
                </t>
            </t>
        </Dropdown>
    </t>

</templates>
