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

<t t-name="hr_attendance.companyHeader">
    <h2 class="mb-2"><small>Welcome to</small></h2>
    <img t-att-src="companyImageUrl" alt="Company Logo" class="o_hr_attendance_kiosk_company_image align-self-center img img-fluid mb-3" width="200"/>
</t>

<t t-name="hr_attendance.public_kiosk_app">
    <MainComponentsContainer/>
    <CardLayout>
        <t t-if="this.state.active_display === 'main'">
            <t t-call="hr_attendance.companyHeader">
                <t t-set="companyImageUrl" t-value="companyImageUrl"/>
                <t t-set="companyName" t-value="this.props.companyName"/>
            </t>
            <t t-if="this.props.kioskMode !== 'manual'">
                <div class="col-md-5 mt-5 mb-5 mb-md-0 align-self-center">
                    <KioskBarcodeScanner barcodeSource="this.props.barcodeSource" onBarcodeScanned="(ev) => this.onBarcodeScanned(ev)"/>
                    <h6 class="mt-2 text-muted">Scan your badge</h6>
                </div>
            </t>
            <t t-if="this.props.kioskMode !== 'barcode'">
                <div class="mt-5 align-self-center">
                    <button t-on-click="() => this.switchDisplay('manual')"  class="o_hr_attendance_button_employees btn btn-link">
                        Identify Manually
                    </button>
                </div>
            </t>
        </t>
        <t t-if="this.state.active_display === 'manual'">
            <t t-call="hr_attendance.companyHeader">
                <t t-set="companyImageUrl" t-value="companyImageUrl"/>
                <t t-set="companyName" t-value="this.props.companyName"/>
            </t>
            <KioskManualSelection employees="this.props.employees" displayBackButton="this.manualKioskMode" departments="this.props.departments" onSelectEmployee="(e) => this.kioskConfirm(e)" onClickBack="() => this.kioskReturn()"/>
        </t>
        <t t-if="this.state.active_display === 'greet'">
            <KioskGreetings employeeData="this.employeeData" kioskReturn="() => this.kioskReturn(true)"/>
        </t>
        <t t-if="this.state.active_display === 'pin'">
            <KioskPinCode employeeData="this.employeeData" onPinConfirm="(id, pin) => this.onManualSelection(id, pin)" onClickBack="() => this.kioskReturn()"/>
        </t>
    </CardLayout>
</t>
</templates>
