{% extends "base.html" %}

{% block title %}Courses - Anzar{% endblock %}

{% block content %}
<div class="courses-container" x-data="coursesPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <div class="header-content">
            <h1 class="page-title">Your Courses</h1>
            <p class="page-subtitle">Select a course to view and grade content</p>
        </div>
        <div class="header-actions">
            <div class="search-box">
                <i class="ph-magnifying-glass"></i>
                <input type="text" x-model="searchTerm" @input="filterCourses()" placeholder="Search courses..." class="search-input">
            </div>
            <button @click="refresh()" class="btn btn-secondary">
                <i class="ph-arrow-clockwise"></i>
                Refresh
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="loading-state">
        <div class="spinner"></div>
        <p>Loading your courses...</p>
    </div>

    <!-- Courses Grid -->
    <div x-show="!loading && !error && hasCourses" class="grid grid-cols-3">
        <template x-for="(course, index) in filteredCourses" :key="course.id">
            <div class="course-card"
                 :class="{ 'selected': isSelected(course.id), 'selecting': isSelected(course.id) }"
                 :style="'animation-delay: ' + getAnimationDelay(index) + '; position: relative;'">
                <div class="course-card-header">
                    <div class="course-code" x-text="course.course_code || 'Course ' + course.id"></div>
                    <div class="course-name" x-text="course.name"></div>
                </div>
                <div class="course-card-body">
                    <template x-if="course.term">
                        <div class="course-term">
                            <i class="ph-calendar"></i>
                            <span x-text="course.term.name || 'No term'"></span>
                        </div>
                    </template>

                    <div class="course-actions">
                        <button @click="selectCourse(course.id, course.name)" class="btn btn-primary btn-sm">
                            <i class="ph-arrow-right"></i>
                            Select Course
                        </button>
                    </div>
                </div>

                <!-- Selection Feedback -->
                <template x-if="isSelected(course.id) && selectionFeedback">
                    <div class="selection-feedback" x-text="selectionFeedback"></div>
                </template>
            </div>
        </template>
    </div>

    <!-- Empty State -->
    <div x-show="showEmpty" class="empty-state">
        <i class="ph-books"></i>
        <h3>No Courses Found</h3>
        <p>Make sure you're connected to Canvas and have access to courses.</p>
        <button @click="window.api.navigate_to('connection.html')" class="btn btn-primary">
            Check Connection
        </button>
    </div>

    <!-- Error State -->
    <div x-show="showError" class="error-state">
        <i class="ph-warning-circle"></i>
        <h3>Failed to Load Courses</h3>
        <p x-text="error"></p>
        <button @click="refresh()" class="btn btn-primary">
            Try Again
        </button>
    </div>
</div>
{% endblock %}

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