<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mail.CallPreview.actionList">
        <ActionList actions="actions" inline="true" hasBtnBg="true"/>
    </t>
    <t t-name="mail.CallPreview">
        <div class="o-mail-CallPreview ratio ratio-16x9">
            <div t-att-class="{'bg-dark': env.inWelcomePage}">
                <video t-if="state.videoStream" class="object-fit-cover h-100 w-100 position-relative z-0" autoplay="" t-ref="video"/>
                <div t-else="" class="position-absolute top-0 start-0 end-0 bottom-0 d-flex flex-column align-items-center justify-content-center text-center px-3 z-1" t-att-class="{'text-white': this.env.inWelcomePage}">
                    <div class="d-flex flex-column align-items-center justify-content-center flex-grow-1" t-att-class="{'mt-2': this.inWelcomePageMobile}">
                        <t t-if="env.inWelcomePage and rtc.cameraPermission !== 'granted'">
                            <span class="fs-3">Do you want people to see and hear you in the meeting?</span>
                            <button class="btn btn-primary mt-3" t-on-click="() => this.toggleCamera()">Allow Microphone and Camera</button>
                        </t>
                        <t t-else="">
                            <div class="d-flex flex-column align-items-center" t-att-class="{'mb-4': !env.inWelcomePage}">
                                <i class="fa fa-camera fa-4x mb-2 opacity-50"/>
                                <span class="fs-4 fw-bold">No Camera Preview</span>
                                <small class="opacity-50">
                                    <t t-if="rtc.cameraPermission !== 'granted'">Please allow access in your browser settings.</t>
                                    <t t-else="">Turn on your camera to see the preview.</t>
                                </small>
                            </div>
                        </t>
                    </div>
                    <div t-if="this.inWelcomePageMobile" class="d-flex justify-content-center mb-3">
                        <t t-call="mail.CallPreview.actionList"/>
                    </div>
                </div>
                <div t-if="state.videoStream or !this.inWelcomePageMobile" class="position-absolute bottom-0 mb-3 w-100 d-flex justify-content-center z-2">
                    <t t-call="mail.CallPreview.actionList"/>
                </div>
            </div>
            <audio autoplay="" t-ref="audio"/>
        </div>
        <div t-if="props.hasSettingsAtBottom" class="d-flex flex-row justify-content-between mt-2 w-100 mw-100 flex-nowrap px-3">
            <div class="px-2" style="width: 30%">
                <DeviceSelect icon="'fa fa-fw fa-microphone'" kind="'audioinput'"/>
            </div>
            <div class="px-2" style="width: 30%">
                <DeviceSelect icon="'fa fa-fw fa-volume-up'" kind="'audiooutput'"/>
            </div>
            <div class="px-2" style="width: 30%">
                <DeviceSelect icon="'fa fa-fw fa-video-camera'" kind="'videoinput'"/>
            </div>
            <div class="d-flex align-items-center flex-grow-0 flex-shrink-0 px-2 text-muted">
                <a role="button" t-on-click="onClickSettings" title="Advanced Settings">
                    <i class="fa fa-fw fa-gear"/>
                </a>
            </div>
        </div>
    </t>
</templates>
