<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-extend="HrAttendanceMyMainMenu">
        <t t-jquery=".o_hr_attendance_kiosk_mode" t-operation="replace">

            <div class="o_hr_attendance_kiosk_mode">
                <t t-set="checked_in" t-value="widget.employee.attendance_state=='checked_in'"/>
                <t t-set="checked_out" t-value="widget.employee.attendance_state=='checked_out'"/>
                <t t-if="widget.employee">
                    <div class="o_hr_attendance_user_badge o_home_menu_background">
                        <img class="img rounded-circle"
                             t-attf-src="/web/image?model=hr.employee&amp;field=image_128&amp;id=#{widget.employee.id}"
                             t-att-title="widget.employee.name" t-att-alt="widget.employee.name"/>
                    </div>
                    <h1 class="mb8"><t t-esc="widget.employee.name"/></h1>
                    <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome!</t>
                        <t t-else="">Want to check out?</t></h3>
                    <h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span
                            t-esc="widget.hours_today"/></h4>
                    <div class="container">
                        <div class="row">

                            <div id="kiosk_action_container" class="col-md-12 kiosk_action_container">
                                <!-- SIGN OUT OF CURRENT PUNCH TYPES -->
                                <a t-if="!checked_out" class="btn btn-secondary btn-block btn-warning o_hr_attendance_sign_in_out_icon"
                                   aria-label="Sign out" title="Sign out">
                                    <i class="fa fa-1x fa-sign-out mr-1 mt-3 mb-3"></i>
                                    <span>
                                        <b>Stop</b>
                                    </span>
                                </a>

                                <p t-if="!checked_out" class="o_hr_attendance_continue">
                                    Or, continue working as:
                                </p>

                                <t t-foreach="widget.work_types" t-as="work_type">
                                    <a class="btn btn-block btn-secondary o_hr_attendance_punch_type mt-2 mb-2"
                                       aria-label="Sign in" title="Sign in" t-attf-data-work-entry-type="#{work_type.id}">
                                        <i t-attf-class="fa #{work_type.attendance_icon} fa-1x mr-1 mt-3 mb-3"> </i>
                                        <span t-esc="work_type.name"/>
                                    </a>
                                </t>
                            </div>

                        </div>
                    </div>
                </t>
                <t t-else="">
                    Warning : Your user should be linked to an employee to use attendance. Please contact your administrator.
                </t>
            </div>

        </t>
    </t>

    <t t-extend="HrAttendanceKioskConfirm">
        <t t-jquery=".o_hr_attendance_kiosk_mode" t-operation="replace">
            <div class="o_hr_attendance_kiosk_mode">
                <t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
                <t t-set="checked_out" t-value="widget.employee_state=='checked_out'"/>
                <div class="o_hr_attendance_back_button">
                    <span class="btn btn-secondary btn-lg d-block d-md-none"><i class="fa fa-chevron-left mr8"/> Go back</span>
                    <span class="btn btn-secondary d-none d-md-inline-block"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
                </div>
                <t t-if="widget.employee_id">
                    <div class="o_hr_attendance_user_badge o_home_menu_background">
                        <img class="img rounded-circle" t-attf-src="/web/image?model=hr.employee&amp;field=image_128&amp;id=#{widget.employee_id}" t-att-title="widget.employee_name" t-att-alt="widget.employee_name"/>
                    </div>
                    <h1 class="mb8"><t t-esc="widget.employee_name"/></h1>
                    <h3 class="mt8 mb24"><t t-if="!checked_in">Welcome! </t><t t-else="">Want to check out?</t></h3>
                    <h4 class="mt0 mb0 text-muted" t-if="checked_in">Today's work hours: <span t-esc="widget.employee_hours_today"/></h4>
                    <t t-if="!widget.use_pin">
                        <div id="kiosk_action_container" class="col-md-12 kiosk_action_container">
                            <!-- SIGN OUT OF CURRENT PUNCH TYPES -->
                            <a t-if="!checked_out" class="btn btn-secondary btn-block btn-warning o_hr_attendance_sign_in_out_icon"
                               aria-label="Sign out" title="Sign out">
                                <i class="fa fa-1x fa-sign-out mr-1 mt-3 mb-3"></i>
                                <span>
                                    <b>Stop</b>
                                </span>
                            </a>

                            <p t-if="!checked_out" class="o_hr_attendance_continue">
                                Or, continue working as:
                            </p>

                            <t t-foreach="widget.work_types" t-as="work_type">
                                <a class="btn btn-block btn-secondary o_hr_attendance_punch_type mt-2 mb-2"
                                   aria-label="Sign in" title="Sign in" t-attf-data-work-entry-type="#{work_type.id}">
                                    <i t-attf-class="fa #{work_type.attendance_icon} fa-1x mr-1 mt-3 mb-3"> </i>
                                    <span t-esc="work_type.name"/>
                                </a>
                            </t>
                        </div>
                    </t>
                    <t t-else="">
                        <h3 class="mt0 mb0 text-muted">Please enter your PIN to <b t-if="checked_in">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" >
                                    <div class="col-12 mb8 mt8"><input class="o_hr_attendance_PINbox text-center" type="password" disabled="true"/></div>
                                </div>
                                <div class="row">
                                    <t t-foreach="['1', '2', '3', '4', '5', '6', '7', '8', '9', ['C', 'btn-warning'], '0', ['ok', 'btn-primary']]" t-as="btn_name">
                                        <div class="col-4 mb4" t-if="btn_name[0] != 'ok'">
                                            <a t-attf-class="btn {{btn_name[1]? btn_name[1] : 'btn-secondary'}} btn-block btn-lg {{ 'o_hr_attendance_pin_pad_button_' + btn_name[0] }}"><t t-esc="btn_name[0]"/></a>
                                        </div>
                                        <t t-else="">
                                            <div class="col-4 mb4" t-if="!checked_out">
                                                <a class="btn btn-primary btn-block btn-lg o_hr_attendance_pin_pad_button_ok">Sign Out</a>
                                            </div>
                                            <div class="col-4 mb4" t-else=""/>
                                            <!-- ok button -->
                                            <div class="col-4 mb4" t-foreach="widget.work_types" t-as="work_type">
                                                <a href="#" class="btn btn-primary btn-block btn-lg o_hr_attendance_pin_pad_button_work small" t-attf-data-work-entry-type="#{work_type.id}"><i t-attf-class="fa fa-1x #{work_type.attendance_icon} mr-1 mt-3 mb-3"></i> <t t-esc="work_type.name"/></a>
                                            </div>
                                        </t>

                                    </t>
                                </div>
                            </div>
                        </div>
                    </t>
                </t>
                <div t-else="" class="alert alert-danger" role="alert">
                    <b>Error: could not find corresponding employee.</b><br/>Please return to the main menu.
                </div>
                <a role="button" class="oe_attendance_sign_in_out" aria-label="Sign out" title="Sign out"/>
            </div>
        </t>
    </t>

</templates>
