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

    <t t-name="discuss.QuickVideoSettings">
        <div class="o-discuss-QuickVideoSettings d-flex flex-column gap-1">
            <label class="btn border-transparent d-flex flex-column align-items-baseline">
                <span class="flex-shrink-0 pe-2">
                    Camera
                </span>
                <div class="flex-grow-1"/>
                <DeviceSelect kind="'videoinput'"/>
            </label>
            <div t-if="!isBrowserSafari()" class="btn border-transparent d-flex gap-2" t-on-click="() => store.settings.setUseBlur(!store.settings.useBlur)">
                <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer gap-2">
                    <i class="fa fa-fw fa-photo"/><span class="text-truncate text-wrap">Blur background</span>
                </label>
                <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?.useBlur ? 'checked' : ''"/>
                </div>
            </div>
            <button class="btn border-transparent d-flex align-items-center gap-2" t-on-click="onClickVideoSettings">
                <i class="fa fa-fw fa-gear"/><span>Video Settings</span>
            </button>
        </div>
    </t>

</templates>
