<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="encoach_exam_template.ExamValidation">
        <Layout display="{ controlPanel: {} }">
            <div class="o_exam_validation">
                <div class="container-fluid py-3">

                    <t t-if="state.loading">
                        <div class="text-center py-5">
                            <i class="fa fa-spinner fa-spin fa-3x text-primary"/>
                            <p class="mt-2 text-muted">Running validation...</p>
                        </div>
                    </t>

                    <!-- Exam selector (when no exam_id in context) -->
                    <t t-elif="!state.examId and state.examList">
                        <h2 class="mb-3">Exam Validation Report</h2>
                        <p class="text-muted mb-4">Select an exam template to validate.</p>
                        <div class="row g-3">
                            <t t-foreach="state.examList" t-as="ex" t-key="ex.id">
                                <div class="col-lg-4 col-md-6">
                                    <div class="card shadow-sm h-100 cursor-pointer ev-exam-card"
                                         t-on-click="() => this.selectExam(ex.id)">
                                        <div class="card-body">
                                            <h6 class="card-title" t-esc="ex.name"/>
                                            <span class="badge bg-secondary me-1" t-if="ex.code" t-esc="ex.code"/>
                                            <span class="badge bg-info" t-esc="ex.type"/>
                                            <div class="mt-2 text-muted small" t-if="ex.total_time_min">
                                                <i class="fa fa-clock-o me-1"/>
                                                <t t-esc="ex.total_time_min"/> min
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </t>

                    <!-- Validation Results -->
                    <t t-elif="state.exam">
                        <div class="d-flex align-items-center mb-4">
                            <button class="btn btn-sm btn-outline-secondary me-3" t-on-click="goBack"
                                    t-if="!this.props.action?.context?.active_id">
                                <i class="fa fa-arrow-left me-1"/> Back
                            </button>
                            <div>
                                <h2 class="mb-0">
                                    Validation: <t t-esc="state.exam.name"/>
                                </h2>
                                <small class="text-muted" t-if="state.exam.code">
                                    Code: <t t-esc="state.exam.code"/>
                                </small>
                            </div>
                        </div>

                        <!-- Overall Status Banner -->
                        <div class="alert d-flex align-items-center mb-4"
                             t-att-class="{ 'alert-success': state.overallValid, 'alert-danger': !state.overallValid }">
                            <i class="fa fa-3x me-3"
                               t-att-class="{ 'fa-check-circle': state.overallValid, 'fa-exclamation-triangle': !state.overallValid }"/>
                            <div>
                                <h5 class="mb-1" t-if="state.overallValid">All Checks Passed</h5>
                                <h5 class="mb-1" t-else="">Validation Issues Found</h5>
                                <span>
                                    <span class="badge bg-success me-1"><t t-esc="state.passCount"/> passed</span>
                                    <span class="badge bg-danger me-1" t-if="state.failCount"><t t-esc="state.failCount"/> failed</span>
                                    <span class="badge bg-warning text-dark" t-if="state.warnCount"><t t-esc="state.warnCount"/> warnings</span>
                                </span>
                            </div>
                        </div>

                        <!-- Check Categories -->
                        <t t-foreach="categories" t-as="cat" t-key="cat">
                            <div class="card shadow-sm mb-3">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center cursor-pointer py-2"
                                     t-on-click="() => this.toggleSection(cat)">
                                    <div class="d-flex align-items-center">
                                        <i class="fa me-2"
                                           t-att-class="{
                                               'fa-check-circle text-success': categoryStatus(cat) === 'pass',
                                               'fa-exclamation-circle text-danger': categoryStatus(cat) === 'fail',
                                               'fa-exclamation-triangle text-warning': categoryStatus(cat) === 'warn'
                                           }"/>
                                        <h6 class="mb-0" t-esc="cat"/>
                                    </div>
                                    <i class="fa"
                                       t-att-class="{ 'fa-chevron-down': isSectionExpanded(cat), 'fa-chevron-right': !isSectionExpanded(cat) }"/>
                                </div>
                                <div class="card-body p-0" t-if="isSectionExpanded(cat)">
                                    <table class="table table-sm mb-0">
                                        <tbody>
                                            <t t-foreach="checksForCategory(cat)" t-as="check" t-key="check.id">
                                                <tr>
                                                    <td style="width:40px" class="text-center">
                                                        <i class="fa"
                                                           t-att-class="{
                                                               'fa-check text-success': check.status === 'pass',
                                                               'fa-times text-danger': check.status === 'fail',
                                                               'fa-exclamation text-warning': check.status === 'warn'
                                                           }"/>
                                                    </td>
                                                    <td>
                                                        <span t-esc="check.label"/>
                                                    </td>
                                                    <td class="text-muted small text-end" t-esc="check.detail"/>
                                                </tr>
                                            </t>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </t>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 mt-4">
                            <button class="btn btn-primary" t-on-click="() => this.runValidation()">
                                <i class="fa fa-refresh me-1"/> Re-run Validation
                            </button>
                        </div>
                    </t>

                    <t t-elif="!state.examId">
                        <div class="text-center py-5 text-muted">
                            <i class="fa fa-clipboard fa-3x mb-3 d-block"/>
                            <p>No exam template found. Open this from an exam template record.</p>
                        </div>
                    </t>
                </div>
            </div>
        </Layout>
    </t>
</templates>
