<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_overtime.SummaryReport">
        <div class="xeno_ot_summary p-3">
            <div class="xeno_ot_summary_header">
                <button class="btn btn-link xeno_ot_summary_nav" t-on-click="goPrev" aria-label="Previous period">
                    <i class="fa fa-chevron-left"/>
                </button>
                <h4 class="xeno_ot_summary_title" t-esc="periodLabel"/>
                <button class="btn btn-link xeno_ot_summary_nav" t-on-click="goNext" aria-label="Next period">
                    <i class="fa fa-chevron-right"/>
                </button>
            </div>

            <div t-if="!state.loaded" class="text-muted p-4">Loading…</div>

            <div t-if="state.loaded" class="xeno_ot_summary_scroll">
                <table class="xeno_ot_summary_table">
                    <thead>
                        <tr>
                            <th class="xeno_ot_summary_emp_col" rowspan="2">Employee</th>
                            <th class="xeno_ot_summary_total_col" rowspan="2">Total</th>
                            <th t-foreach="state.segments" t-as="seg" t-key="seg.monthKey"
                                t-att-colspan="seg.span" class="xeno_ot_summary_segment" t-esc="seg.label"/>
                        </tr>
                        <tr>
                            <th t-foreach="state.days" t-as="day" t-key="day.key"
                                t-att-class="{ 'xeno_ot_summary_weekend': day.isWeekend or day.isHoliday }"
                                class="xeno_ot_summary_day" t-esc="day.dayNum"/>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.rows.length">
                            <td class="text-muted p-3" t-att-colspan="state.days.length + 2">
                                No approved overtime in this period.
                            </td>
                        </tr>
                        <tr t-foreach="state.rows" t-as="row" t-key="row.employeeId">
                            <td class="xeno_ot_summary_emp_col" t-esc="row.employeeName"/>
                            <td class="xeno_ot_summary_total_col" t-esc="row.totalStr"/>
                            <td t-foreach="row.cells" t-as="cell" t-key="cell_index"
                                t-att-class="{ 'xeno_ot_summary_weekend': state.days[cell_index].isWeekend or state.days[cell_index].isHoliday }"
                                class="xeno_ot_summary_day" t-esc="cell"/>
                        </tr>
                    </tbody>
                    <tfoot t-if="state.rows.length">
                        <tr>
                            <td class="xeno_ot_summary_emp_col">Total</td>
                            <td class="xeno_ot_summary_total_col" t-esc="state.totals.grandTotalStr"/>
                            <td t-foreach="state.totals.cellStrs" t-as="cell" t-key="cell_index"
                                t-att-class="{ 'xeno_ot_summary_weekend': state.days[cell_index].isWeekend or state.days[cell_index].isHoliday }"
                                class="xeno_ot_summary_day" t-esc="cell"/>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </t>
</templates>
