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

<t t-name="hr_attendance.EmployeeBadge">
    <div class="o_hr_attendance_user_badge o_attendance_background d-flex align-items-end justify-content-center flex-grow-1 pt-5 pt-md-4 bg-odoo">
        <img class="o_hr_attendance_employee_badge img rounded-circle" t-attf-src="data:image/png;base64,{{employeeAvatar}}" height="80"/>
    </div>
</t>

<t t-name="hr_attendance.KioskPinConfirm">
        <button t-on-click="() => this.props.onClickBack()" class="o_hr_attendance_back_button btn btn-block btn-secondary btn-lg d-block d-md-none py-5">
            <i class="oi oi-chevron-left me-2"/> Go back
        </button>
        <t t-call="hr_attendance.EmployeeBadge">
            <t t-set="employeeAvatar" t-value="this.props.employeeData.employee_avatar"/>
        </t>
        <button t-on-click="() => this.props.onClickBack()" class="o_hr_attendance_back_button o_hr_attendance_back_button_md btn btn-secondary d-none d-md-inline-flex align-items-center position-absolute top-0 start-0 rounded-circle">
            <i class="oi fa-2x fa-fw oi-chevron-left me-1" role="img" aria-label="Go back" title="Go back"/>
        </button>

        <div t-if="this.props.employeeData" class="flex-grow-1">
            <h1 class="mt-5 mb8" t-esc="this.props.employeeData.employee_name"/>
            <h3 class="mt8 mb24"><t t-if="!checkedIn">Welcome!</t><t t-else="">Want to check out?</t></h3>
            <h3 class="mt-4 mb0 text-muted">Please enter your PIN to <b t-if="checkedIn">check out</b><b t-else="">check in</b></h3>
            <div class="row">
                <div class="col-md-8 offset-md-2 o_hr_attendance_pin_pad">
                    <div class="row g-0" >
                        <input t-att-value="state.codePin" class="o_hr_attendance_PINbox col-12 mb8 mt8 border-0 bg-white fs-1 text-center" type="password" disabled="true"/>
                    </div>
                    <div class="row g-0">
                        <t t-foreach="padButtons" t-as="btn" t-key="btn[0]">
                            <div class="col-4 p-1">
                                <a href="#" t-on-click="() => this.onClickPadButton(btn[0])" t-attf-class="o_hr_attendance_PINbox_button btn {{btn[1]? btn[1] : 'btn-secondary border'}} btn-block btn-lg d-flex align-items-center justify-content-center">
                                    <t t-esc="btn[0]"/>
                                </a>
                            </div>
                        </t>
                    </div>
                </div>
            </div>
        </div>
        <div t-else="" class="alert alert-danger mx-3" role="alert">
            <h4 class="alert-heading">Error: could not find corresponding employee.</h4>
            <p>Please return to the main menu.</p>
        </div>
        <a role="button" class="oe_attendance_sign_in_out" aria-label="Sign out" title="Sign out"/>
</t>

</templates>
