<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.LeaveDecisionDialog">
        <Dialog title="title" size="'md'">
            <div class="o_xeno_decision_dialog">
                <div class="o_xeno_full_chain mb-3">
                    <t t-foreach="props.leave.steps" t-as="step" t-key="step.id">
                        <span t-attf-class="o_xeno_pill o_xeno_chain_pill {{
                            step.state === 'approved' ? 'o_xeno_pill_approved'
                            : step.isCurrent ? 'o_xeno_pill_step_current'
                            : 'o_xeno_pill_muted' }}"
                              t-esc="step.label"/>
                        <i t-if="!step_last" class="fa fa-arrow-right o_xeno_chain_dialog_arrow"/>
                    </t>
                </div>

                <div class="fw-bold mb-1">
                    <t t-esc="props.leave.employeeName"/> — <t t-esc="props.leave.leaveTypeName"/>
                </div>
                <div class="text-muted mb-3">
                    <t t-esc="props.leave.dateFrom"/> to <t t-esc="props.leave.dateTo"/>
                    (<t t-esc="props.leave.duration"/>)
                    <div t-if="props.leave.requestUnitLabel">(<t t-esc="props.leave.requestUnitLabel"/>)</div>
                </div>

                <div class="o_xeno_reason_box mb-3">
                    Reason: <t t-esc="props.leave.reason || '-'"/>
                </div>

                <div class="o_xeno_balance_strip mb-3">
                    <span class="o_xeno_bal">Total
                        <span class="o_field_widget" t-esc="props.leave.balanceTotal"/></span>
                    <span class="o_xeno_bal">Used
                        <span class="o_field_widget" t-esc="props.leave.balanceUsed"/></span>
                    <span class="o_xeno_bal">Pending
                        <span class="o_field_widget" t-esc="props.leave.balancePending"/></span>
                    <span class="o_xeno_bal o_xeno_bal_remaining">Remaining
                        <span class="o_field_widget" t-esc="props.leave.balanceRemaining"/></span>
                </div>

                <div t-if="state.analysis.length" class="o_xeno_analysis mb-3">
                    <div class="fw-bold small mb-1">Analysis</div>
                    <t t-foreach="state.analysis" t-as="rule" t-key="rule.key">
                        <div t-attf-class="o_xeno_analysis_row {{
                                rule.flagged ? 'o_xeno_analysis_flagged' : 'o_xeno_analysis_ok' }}">
                            <i t-attf-class="fa {{
                                rule.flagged ? 'fa-exclamation-triangle' : 'fa-check-circle'
                                }} o_xeno_analysis_icon"/>
                            <span class="o_xeno_analysis_label" t-esc="rule.label"/>:
                            <span class="o_xeno_analysis_message" t-out="rule.message"/>
                        </div>
                    </t>
                </div>

                <div t-if="state.summary.length" class="mb-3">
                    <div class="fw-bold small mb-1">
                        <t t-esc="props.leave.employeeName"/>'s summary (<t t-esc="state.year"/>)
                    </div>
                    <table class="o_xeno_summary_table">
                        <t t-foreach="groupedSummary" t-as="grp" t-key="grp.typeId">
                            <tr t-foreach="grp.rows" t-as="row" t-key="row.id">
                                <td t-if="row_index === 0" t-att-rowspan="grp.rows.length"
                                    t-attf-style="color:{{ grp.color }}"
                                    class="o_xeno_summary_type fw-bold" t-esc="grp.typeName"/>
                                <td class="o_xeno_summary_dates">
                                    <t t-esc="row.dateFrom"/> → <t t-esc="row.dateTo"/>
                                </td>
                                <td class="o_xeno_summary_days text-muted">(<t t-esc="row.days"/> days)</td>
                            </tr>
                        </t>
                    </table>
                </div>

                <label class="fw-bold small" for="xeno_decision_note">Note (optional)</label>
                <textarea id="xeno_decision_note" class="form-control mb-3" rows="3"
                          t-model="state.note"/>

                <div class="d-flex justify-content-end gap-2">
                    <button class="btn btn-secondary" t-on-click="() => props.close()">Cancel</button>
                    <button t-attf-class="btn {{ isApprove ? 'btn-primary' : 'btn-danger' }}"
                            t-att-disabled="state.busy"
                            t-on-click="onConfirm">
                        <span t-if="isApprove">Approve</span>
                        <span t-else="">Reject</span>
                    </button>
                </div>
            </div>
        </Dialog>
    </t>
</templates>
