<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_attendance.MyIframe" owl="1">
        <div class="xeno_my_attendance_page">
            <div t-if="state.loaded and state.linked" class="xeno_checkin_card">
                <div class="xeno_checkin_left">
                    <div class="xeno_checkin_clock_icon">
                        <i class="fa fa-clock-o"/>
                    </div>
                    <div>
                        <div class="xeno_checkin_clock" t-esc="clockLabel"/>
                        <div class="xeno_checkin_date" t-esc="dateLabel"/>
                    </div>
                </div>
                <div class="xeno_checkin_right">
                    <span t-attf-class="o_xeno_pill {{ isPresent ? 'o_xeno_pill_approved' : 'o_xeno_pill_muted' }}">
                        <t t-if="isPresent">Present</t>
                        <t t-else="">Absent</t>
                    </span>
                    <div t-if="state.checkedIn and state.lastCheckIn" class="xeno_checkin_since">
                        In: <strong t-esc="state.lastCheckIn"/>
                    </div>
                    <div t-elif="state.fingerprintPresent and state.fingerprintInTime" class="xeno_checkin_since">
                        In: <strong t-esc="state.fingerprintInTime"/>
                    </div>
                    <button class="btn xeno_checkin_btn"
                            t-attf-class="btn xeno_checkin_btn {{ isPresent ? 'xeno_checkin_btn_out' : 'xeno_checkin_btn_in' }}"
                            t-att-disabled="state.busy"
                            t-on-click="onSignInOut">
                        <i class="fa fa-sign-in" t-if="!isPresent"/>
                        <i class="fa fa-sign-out" t-if="isPresent"/>
                        <t t-if="isPresent"> Check Out</t>
                        <t t-else=""> Check In</t>
                    </button>
                </div>
            </div>
            <iframe class="xeno_attendance_iframe"
                    t-ref="attendanceIframe"
                    src="/odoo/attendances/my"
                    style="width:100%;border:0;display:block;"/>
        </div>
    </t>
</templates>
