{% extends "base.html" %}

{% block title %}Select Content - AnZar{% endblock %}

{% block content %}
<div x-data="contentListPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title" x-text="contentType === 'quiz' ? 'Select Quiz' : 'Select Assignment'"></h1>
        <p class="page-subtitle" x-show="courseName" x-text="'Course: ' + courseName"></p>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i :class="contentType === 'quiz' ? 'ph-file-text' : 'ph-folder'"></i>
                <span x-text="contentType === 'quiz' ? 'Available Quizzes' : 'Available Assignments'"></span>
            </h3>
            <div class="header-actions">
                <div class="search-box">
                    <i class="ph-magnifying-glass"></i>
                    <input type="text"
                           x-model="searchTerm"
                           @input.debounce.300ms="filterItems()"
                           :placeholder="contentType === 'quiz' ? 'Search quizzes...' : 'Search assignments...'"
                           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" x-text="'Loading ' + (contentType === 'quiz' ? 'quizzes' : 'assignments') + '...'"></p>
            </div>

            <!-- Content grid -->
            <div x-show="!loading && !error">
                <div x-show="filteredItems.length === 0" class="text-center text-muted py-4">
                    <p x-text="'No ' + (contentType === 'quiz' ? 'quizzes' : 'assignments') + ' match your search.'"></p>
                </div>

                <div class="selection-grid">
                    <template x-for="(item, index) in filteredItems" :key="item.id">
                        <div class="card selection-card"
                             :class="[getCardClass(index), { 'selected': isSelected(item.id), 'selecting': isSelected(item.id) }]"
                             @click="selectItem(item)">
                            <div class="selection-card-header">
                                <h4 class="selection-card-title" x-text="contentType === 'quiz' ? item.title : item.name"></h4>
                                <span class="status-badge"
                                      :class="item.published ? 'status-success' : 'status-error'">
                                    <i :class="item.published ? 'ph-check-circle' : 'ph-x-circle'"></i>
                                    <span x-text="item.published ? 'Published' : 'Unpublished'"></span>
                                </span>
                            </div>
                            <div class="selection-card-body">
                                <!-- Quiz-specific info -->
                                <template x-if="contentType === 'quiz'">
                                    <div>
                                        <p class="text-secondary mb-2">
                                            <i class="ph-file-text"></i>
                                            <span x-text="'Type: ' + (item.quiz_type || 'Quiz')"></span>
                                        </p>
                                        <p class="text-secondary">
                                            <i class="ph-hash"></i>
                                            <span x-text="'ID: ' + item.id"></span>
                                        </p>
                                    </div>
                                </template>

                                <!-- Assignment-specific info -->
                                <template x-if="contentType === 'assignment'">
                                    <div>
                                        <p class="text-secondary mb-2">
                                            <i class="ph-calendar"></i>
                                            <span x-text="'Due: ' + formatDueDate(item.due_at)"></span>
                                        </p>
                                        <p class="text-secondary mb-2">
                                            <i class="ph-file-text"></i>
                                            <span x-text="'Submission: ' + formatSubmissionTypes(item.submission_types)"></span>
                                        </p>
                                        <p class="text-secondary">
                                            <i class="ph-hash"></i>
                                            <span x-text="'ID: ' + item.id"></span>
                                        </p>
                                    </div>
                                </template>
                            </div>

                            <!-- Selection feedback -->
                            <template x-if="isSelected(item.id)">
                                <div class="selection-feedback">
                                    <span class="checkmark">✓</span>
                                    <span x-text="contentType === 'quiz' ? 'Loading submissions...' : 'Checking submissions...'"></span>
                                </div>
                            </template>
                        </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="navigateTo('content_select.html')">
                        ← Back to Content Type
                    </button>
                    <button class="btn btn-primary" @click="loadItems()">
                        Retry
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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