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

    <!-- ═══════════════════════════════════════════════════════════════
         ExamMCQ — Single-choice radio buttons
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamMCQ">
        <div class="ec-option-list">
            <t t-foreach="options" t-as="opt" t-key="opt.key">
                <div t-att-class="'ec-option' + (props.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>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamMCQMulti — Multi-choice checkboxes
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamMCQMulti">
        <div class="ec-option-list">
            <t t-foreach="options" t-as="opt" t-key="opt.key">
                <div t-att-class="'ec-option' + (this.isChecked(opt.key) ? ' ec-option--selected' : '')"
                     t-on-click="() => this.toggleOption(opt.key)">
                    <div class="ec-option-checkbox"/>
                    <span class="ec-option-key" t-esc="opt.key + '.'"/>
                    <span class="ec-option-label" t-esc="opt.label"/>
                </div>
            </t>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamGapFill — Inline text inputs
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamGapFill">
        <div class="ec-gap-fill">
            <t t-foreach="gaps" t-as="gap" t-key="gap_index">
                <div class="ec-gap-row">
                    <span class="ec-gap-label" t-esc="(gap_index + 1) + '.'"/>
                    <input type="text"
                           class="ec-gap-input"
                           t-att-placeholder="gap.hint or 'Type your answer...'"
                           t-att-value="this.gapValue(gap_index)"
                           t-on-input="(ev) => this.onGapInput(gap_index, ev)"/>
                </div>
            </t>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamTFNG — True / False / Not Given selector
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamTFNG">
        <div class="ec-tfng-options">
            <t t-foreach="choices" t-as="choice" t-key="choice.key">
                <div t-att-class="'ec-tfng-btn' + (props.answer === choice.key ? ' ec-tfng-btn--selected' : '')"
                     t-on-click="() => this.select(choice.key)">
                    <t t-esc="choice.label"/>
                </div>
            </t>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamAudioRecorder — Record audio (speaking tasks)
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamAudioRecorder">
        <div class="ec-audio-recorder">
            <t t-if="state.error">
                <div class="ec-audio-error" t-esc="state.error"/>
            </t>

            <t t-if="!state.recording and !state.recordedUrl">
                <button class="ec-record-btn ec-record-btn--start"
                        t-on-click="startRecording">
                    🎙
                </button>
                <div class="ec-audio-hint">Click to start recording</div>
            </t>

            <t t-if="state.recording">
                <div class="ec-audio-duration"
                     t-esc="formatDuration(state.duration)"/>
                <button class="ec-record-btn ec-record-btn--stop"
                        t-on-click="stopRecording">
                    ■
                </button>
                <div class="ec-audio-hint">Recording... Click to stop</div>
            </t>

            <t t-if="state.recordedUrl and !state.recording">
                <div class="ec-audio-duration"
                     t-esc="formatDuration(state.duration)"/>
                <audio class="ec-audio-playback"
                       controls=""
                       t-att-src="state.recordedUrl"/>
                <button class="ec-record-btn ec-record-btn--start"
                        t-on-click="startRecording">
                    🎙
                </button>
                <div class="ec-audio-hint">Click to re-record</div>
            </t>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamRichEditor — Writing task editor
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamRichEditor">
        <div class="ec-rich-editor">
            <textarea class="ec-editor-textarea"
                      t-ref="editor"
                      t-att-value="props.answer or ''"
                      t-on-input="onInput"
                      placeholder="Write your response here..."/>
            <div class="ec-editor-footer">
                <span t-att-class="'ec-word-count'
                    + (state.wordCount &lt; minWords ? ' ec-word-count--low' : '')
                    + (state.wordCount >= minWords and state.wordCount &lt;= maxWords ? ' ec-word-count--ok' : '')
                    + (state.wordCount > maxWords ? ' ec-word-count--over' : '')">
                    <t t-esc="state.wordCount"/> words
                </span>
                <span class="ec-word-range">
                    Target: <t t-esc="minWords"/>–<t t-esc="maxWords"/> words
                </span>
            </div>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamReadingPassage — Scrollable passage display
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamReadingPassage">
        <div class="ec-passage-panel">
            <div class="ec-passage-title" t-esc="passageTitle"/>
            <div class="ec-passage-body" t-esc="passageContent"/>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamNumericalInput — Number input with tolerance
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamNumericalInput">
        <div>
            <div class="ec-numerical-group">
                <input type="number"
                       class="ec-numerical-input"
                       step="any"
                       t-att-value="props.answer or ''"
                       t-on-input="onInput"
                       placeholder="Enter value"/>
                <span t-if="unit" class="ec-numerical-unit" t-esc="unit"/>
            </div>
            <div t-if="tolerance" class="ec-numerical-tolerance">
                Accepted tolerance: ± <t t-esc="tolerance"/>
            </div>
        </div>
    </t>

    <!-- ═══════════════════════════════════════════════════════════════
         ExamCodeEditor — Code editing textarea
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamCodeEditor">
        <div class="ec-code-editor">
            <div class="ec-code-lang" t-esc="language"/>
            <textarea class="ec-code-textarea"
                      t-ref="codeEditor"
                      t-att-value="props.answer or starterCode"
                      t-on-input="onInput"
                      placeholder="Write your code here..."
                      spellcheck="false"/>
        </div>
    </t>

</templates>
