<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="encoach_exam_template.ContentPool">
        <Layout display="{ controlPanel: {} }">
            <div class="o_content_pool">
                <div class="container-fluid py-3">
                    <div class="d-flex align-items-center mb-3">
                        <h2 class="mb-0 me-3">Content Pool</h2>
                        <span class="badge bg-primary fs-6" t-if="state.totalCount">
                            <t t-esc="state.totalCount"/> questions
                        </span>
                    </div>

                    <!-- Filter Bar -->
                    <div class="card shadow-sm mb-3">
                        <div class="card-body py-2">
                            <div class="row g-2 align-items-end">
                                <div class="col-md-3">
                                    <label class="form-label small fw-bold mb-1">Skill</label>
                                    <select class="form-select form-select-sm"
                                            t-on-change="(ev) => this.onFilterChange('skill', ev)">
                                        <option value="">All Skills</option>
                                        <option value="listening">Listening</option>
                                        <option value="reading">Reading</option>
                                        <option value="writing">Writing</option>
                                        <option value="speaking">Speaking</option>
                                        <option value="grammar">Grammar</option>
                                        <option value="vocabulary">Vocabulary</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small fw-bold mb-1">Difficulty</label>
                                    <select class="form-select form-select-sm"
                                            t-on-change="(ev) => this.onFilterChange('difficulty', ev)">
                                        <option value="">All</option>
                                        <option value="easy">Easy</option>
                                        <option value="medium">Medium</option>
                                        <option value="hard">Hard</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small fw-bold mb-1">Status</label>
                                    <select class="form-select form-select-sm"
                                            t-on-change="(ev) => this.onFilterChange('status', ev)">
                                        <option value="">All</option>
                                        <option value="active" selected="selected">Active</option>
                                        <option value="draft">Draft</option>
                                        <option value="retired">Retired</option>
                                        <option value="flagged">Flagged</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small fw-bold mb-1">Search</label>
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control"
                                               placeholder="Search question text..."
                                               t-on-input="onSearchInput"
                                               t-on-keydown="onSearchKeydown"/>
                                        <button class="btn btn-outline-primary" t-on-click="applySearch">
                                            <i class="fa fa-search"/>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-1 text-end">
                                    <button class="btn btn-sm btn-outline-secondary" t-on-click="() => { this.state.filters = { skill: '', difficulty: '', status: 'active', search: '' }; this.state.page = 1; this.loadQuestions(); }">
                                        <i class="fa fa-refresh"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <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">Loading questions...</p>
                        </div>
                    </t>

                    <t t-else="">
                        <div class="cp-split-panel">
                            <!-- Left: Question List -->
                            <div class="cp-question-list">
                                <div class="card shadow-sm h-100">
                                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">Available Questions</h6>
                                        <small class="text-muted">
                                            Page <t t-esc="state.page"/> of <t t-esc="totalPages"/>
                                        </small>
                                    </div>
                                    <div class="card-body p-0 cp-scroll">
                                        <table class="table table-hover table-sm mb-0">
                                            <thead class="table-light sticky-top">
                                                <tr>
                                                    <th style="width:40px"/>
                                                    <th>Question</th>
                                                    <th style="width:90px">Skill</th>
                                                    <th style="width:80px">Difficulty</th>
                                                    <th style="width:55px">Marks</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <t t-foreach="state.questions" t-as="q" t-key="q.id">
                                                    <tr t-att-class="{ 'table-active': isSelected(q.id) }"
                                                        class="cursor-pointer"
                                                        t-on-click="() => this.toggleQuestion(q)">
                                                        <td class="text-center">
                                                            <input type="checkbox"
                                                                   class="form-check-input"
                                                                   t-att-checked="isSelected(q.id)"
                                                                   t-on-click.stop="() => this.toggleQuestion(q)"/>
                                                        </td>
                                                        <td>
                                                            <span t-esc="truncate(q.stem, 80)"/>
                                                            <br/>
                                                            <small class="text-muted" t-esc="q.question_type"/>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-primary bg-opacity-75" t-esc="skillLabel(q.skill)"/>
                                                        </td>
                                                        <td>
                                                            <span class="badge" t-att-class="difficultyClass(q.difficulty)" t-esc="q.difficulty"/>
                                                        </td>
                                                        <td class="text-center fw-bold" t-esc="q.marks"/>
                                                    </tr>
                                                </t>
                                                <t t-if="!state.questions.length">
                                                    <tr>
                                                        <td colspan="5" class="text-center text-muted py-4">
                                                            <i class="fa fa-inbox fa-2x mb-2 d-block"/>
                                                            No questions match your filters
                                                        </td>
                                                    </tr>
                                                </t>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="card-footer bg-white d-flex justify-content-between align-items-center py-2">
                                        <small class="text-muted">
                                            Showing <t t-esc="Math.min((state.page - 1) * state.pageSize + 1, state.totalCount)"/>-<t t-esc="Math.min(state.page * state.pageSize, state.totalCount)"/> of <t t-esc="state.totalCount"/>
                                        </small>
                                        <div>
                                            <button class="btn btn-sm btn-outline-secondary me-1"
                                                    t-att-disabled="state.page &lt;= 1"
                                                    t-on-click="prevPage">
                                                <i class="fa fa-chevron-left"/>
                                            </button>
                                            <button class="btn btn-sm btn-outline-secondary"
                                                    t-att-disabled="state.page >= totalPages"
                                                    t-on-click="nextPage">
                                                <i class="fa fa-chevron-right"/>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right: Selected Questions -->
                            <div class="cp-selected-panel">
                                <div class="card shadow-sm h-100 border-primary">
                                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">
                                            <i class="fa fa-check-square me-1"/>
                                            Selected (<t t-esc="selectedCount"/>)
                                        </h6>
                                        <button class="btn btn-sm btn-outline-light"
                                                t-on-click="clearSelection"
                                                t-if="selectedCount > 0">
                                            Clear All
                                        </button>
                                    </div>
                                    <div class="card-body p-3">
                                        <!-- Summary -->
                                        <div class="row g-2 mb-3" t-if="selectedCount > 0">
                                            <div class="col-6">
                                                <div class="bg-light rounded p-2 text-center">
                                                    <div class="fs-4 fw-bold text-primary" t-esc="selectedCount"/>
                                                    <small class="text-muted">Questions</small>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="bg-light rounded p-2 text-center">
                                                    <div class="fs-4 fw-bold text-success" t-esc="selectedMarks"/>
                                                    <small class="text-muted">Total Marks</small>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Selected Items -->
                                        <div class="cp-scroll-selected">
                                            <t t-foreach="state.selectedQuestions" t-as="sq" t-key="sq.id">
                                                <div class="d-flex align-items-start border rounded p-2 mb-2 bg-white">
                                                    <div class="flex-grow-1 me-2">
                                                        <small class="d-block" t-esc="truncate(sq.stem, 60)"/>
                                                        <span class="badge bg-primary bg-opacity-50 me-1" style="font-size:0.65rem" t-esc="skillLabel(sq.skill)"/>
                                                        <span class="badge" t-att-class="difficultyClass(sq.difficulty)" style="font-size:0.65rem" t-esc="sq.difficulty"/>
                                                        <span class="badge bg-dark bg-opacity-50" style="font-size:0.65rem">
                                                            <t t-esc="sq.marks"/> mk
                                                        </span>
                                                    </div>
                                                    <button class="btn btn-sm btn-outline-danger flex-shrink-0"
                                                            t-on-click.stop="() => this.removeSelected(sq.id)"
                                                            title="Remove">
                                                        <i class="fa fa-times"/>
                                                    </button>
                                                </div>
                                            </t>
                                            <t t-if="selectedCount === 0">
                                                <div class="text-center text-muted py-4">
                                                    <i class="fa fa-hand-pointer-o fa-2x mb-2 d-block"/>
                                                    <small>Click questions to select them</small>
                                                </div>
                                            </t>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </t>
                </div>
            </div>
        </Layout>
    </t>
</templates>
