{% extends "base.html" %}

{% block title %}Canvas Grading System - Select Quiz{% endblock %}

{% block content %}
<div x-data="quizListPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">Select Quiz</h1>
        <p class="page-subtitle">Choose the quiz you want to grade</p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="ph-file-text"></i>
                Available Quizzes
            </h3>
            <div class="header-actions">
                <div class="search-box">
                    <i class="ph-magnifying-glass"></i>
                    <input type="text"
                           x-model="searchTerm"
                           @input="filterQuizzes()"
                           placeholder="Search quizzes..."
                           class="search-input">
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Loading state -->
            <div x-show="loading" class="loading">
                <div class="spinner"></div>
                <p class="loading-text">Loading quizzes...</p>
            </div>

            <!-- Quizzes grid -->
            <div x-show="!loading && !error">
                <div x-show="filteredQuizzes.length === 0" class="text-center text-muted py-4">
                    <p>No quizzes match your search.</p>
                </div>

                <div class="selection-grid">
                    <template x-for="(quiz, index) in filteredQuizzes" :key="quiz.id">
                        <div class="card selection-card"
                             :class="getCardClass(index)"
                             @click="selectQuiz(quiz)">
                            <div class="selection-card-header">
                                <h4 class="selection-card-title" x-text="quiz.title"></h4>
                                <span class="status-badge"
                                      :class="quiz.published ? 'status-success' : 'status-error'">
                                    <i :class="quiz.published ? 'ph-check-circle' : 'ph-x-circle'"></i>
                                    <span x-text="quiz.published ? 'Published' : 'Unpublished'"></span>
                                </span>
                            </div>
                            <div class="selection-card-body">
                                <p class="text-secondary mb-2">
                                    <i class="ph-file-text"></i>
                                    <span x-text="'Type: ' + quiz.quiz_type"></span>
                                </p>
                                <p class="text-secondary">
                                    <i class="ph-hash"></i>
                                    <span x-text="'ID: ' + quiz.id"></span>
                                </p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Error state -->
            <div x-show="error" class="mt-4">
                <div class="alert alert-error" x-text="error"></div>
                <div class="btn-group mt-3">
                    <button class="btn btn-secondary" @click="window.api.navigate_to('content_select.html')">
                        ← Back to Content Type
                    </button>
                    <button class="btn btn-primary" @click="loadQuizzes()">
                        Retry
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="/frontend/static/js/quiz_list.js"></script>
{% endblock %}