<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <!-- ═══════════════════════════════════════════════════════════════
         PlacementApp — CAT adaptive placement test
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.PlacementApp">
        <div class="ec-exam-fullscreen" t-ref="root">

            <!-- Loading -->
            <t t-if="state.loading">
                <div class="ec-loading">
                    <div class="ec-spinner"/>
                    <div class="ec-loading-text">Preparing your placement test...</div>
                </div>
            </t>

            <!-- Error -->
            <t t-elif="state.error and !state.currentQuestion">
                <div class="ec-loading">
                    <div class="ec-loading-text" style="color: var(--ec-danger);"
                         t-esc="state.error"/>
                </div>
            </t>

            <!-- Completed — Show results -->
            <t t-elif="state.completed">
                <div class="ec-topbar">
                    <div class="ec-topbar-title">Placement Test — Complete</div>
                </div>
                <div class="ec-placement-center">
                    <div class="ec-placement-card">
                        <div class="ec-placement-results">
                            <div class="ec-placement-results-icon">✓</div>
                            <div class="ec-placement-results-title">
                                Placement Complete!
                            </div>
                            <div class="ec-placement-results-level"
                                 t-esc="cefrLabel"/>
                            <div class="ec-placement-results-desc">
                                Based on your responses, you have been placed at
                                the <b t-esc="cefrLabel"/> level.
                                Your personalized learning path is now ready.
                            </div>
                            <button class="ec-placement-results-btn"
                                    t-on-click="goToDashboard">
                                Go to Dashboard
                            </button>
                        </div>
                    </div>
                </div>
            </t>

            <!-- Active Question -->
            <t t-else="">

                <!-- Top bar with progress -->
                <div class="ec-topbar">
                    <div class="ec-topbar-title">Placement Test</div>

                    <div class="ec-placement-progress">
                        <div class="ec-progress-bar-container">
                            <div class="ec-progress-bar-fill"
                                 t-att-style="progressStyle"/>
                        </div>
                    </div>

                    <div class="ec-placement-info">
                        Question <t t-esc="state.questionsAnswered + 1"/>
                    </div>
                </div>

                <!-- Question card -->
                <div class="ec-placement-center">
                    <div class="ec-placement-card" t-if="state.currentQuestion">
                        <div class="ec-placement-card-header">
                            <div class="ec-question-type"
                                 t-esc="state.currentQuestion.question_type or 'question'"/>
                            <div class="ec-question-type"
                                 t-esc="state.currentQuestion.skill or ''"/>
                        </div>
                        <div class="ec-placement-card-body">
                            <!-- Stem -->
                            <div class="ec-question-stem"
                                 t-esc="state.currentQuestion.stem"/>

                            <!-- MCQ options (default for placement) -->
                            <t t-if="questionType === 'mcq' or questionType === 'multiple_choice'">
                                <div class="ec-option-list">
                                    <t t-foreach="questionOptions" t-as="opt" t-key="opt.key">
                                        <div t-att-class="'ec-option' + (state.answer === opt.key ? ' ec-option--selected' : '')"
                                             t-on-click="() => this.selectOption(opt.key)">
                                            <div class="ec-option-radio"/>
                                            <span class="ec-option-key" t-esc="opt.key + '.'"/>
                                            <span class="ec-option-label" t-esc="opt.label"/>
                                        </div>
                                    </t>
                                </div>
                            </t>

                            <!-- TFNG -->
                            <t t-elif="questionType === 'tfng'">
                                <div class="ec-tfng-options">
                                    <div t-att-class="'ec-tfng-btn' + (state.answer === 'true' ? ' ec-tfng-btn--selected' : '')"
                                         t-on-click="() => this.selectOption('true')">True</div>
                                    <div t-att-class="'ec-tfng-btn' + (state.answer === 'false' ? ' ec-tfng-btn--selected' : '')"
                                         t-on-click="() => this.selectOption('false')">False</div>
                                    <div t-att-class="'ec-tfng-btn' + (state.answer === 'not_given' ? ' ec-tfng-btn--selected' : '')"
                                         t-on-click="() => this.selectOption('not_given')">Not Given</div>
                                </div>
                            </t>

                            <!-- Gap fill -->
                            <t t-elif="questionType === 'gap_fill'">
                                <input type="text"
                                       class="ec-gap-input"
                                       t-att-value="state.answer or ''"
                                       t-on-input="(ev) => this.state.answer = ev.target.value"
                                       placeholder="Type your answer..."/>
                            </t>

                            <!-- Fallback: text input -->
                            <t t-else="">
                                <div class="ec-option-list">
                                    <t t-foreach="questionOptions" t-as="opt" t-key="opt.key">
                                        <div t-att-class="'ec-option' + (state.answer === opt.key ? ' ec-option--selected' : '')"
                                             t-on-click="() => this.selectOption(opt.key)">
                                            <div class="ec-option-radio"/>
                                            <span class="ec-option-key" t-esc="opt.key + '.'"/>
                                            <span class="ec-option-label" t-esc="opt.label"/>
                                        </div>
                                    </t>
                                </div>
                            </t>

                            <!-- Error message -->
                            <t t-if="state.error">
                                <div style="color: var(--ec-danger); margin-top: 12px; font-size: 14px;"
                                     t-esc="state.error"/>
                            </t>
                        </div>

                        <div class="ec-placement-actions">
                            <button class="ec-placement-next"
                                    t-att-disabled="!hasAnswer or state.submitting"
                                    t-on-click="submitAnswer">
                                <t t-if="state.submitting">Submitting...</t>
                                <t t-else="">Next Question →</t>
                            </button>
                        </div>
                    </div>
                </div>
            </t>
        </div>
    </t>

</templates>
