{% extends "base.html" %}

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

{% block content %}
<div x-data="assignmentListPage()" x-init="init()">
    <!-- Page Header -->
    <div class="page-header mb-4">
        <h1 class="page-title">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="ph-file-text"></i>
                Available Assignments
            </h3>
            <div class="header-actions">
                <div class="search-box">
                    <i class="ph-magnifying-glass"></i>
                    <input type="text" x-model="searchTerm" @input.debounce.300ms="filterAssignments()" placeholder="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">Loading assignments...</p>
            </div>

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

                <div class="selection-grid">
                    <template x-for="(assignment, index) in filteredAssignments" :key="assignment.id">
                        <div class="card selection-card"
                             :class="[getCardClass(index), { 'selected': isSelected(assignment.id), 'selecting': isSelected(assignment.id) }]"
                             @click="selectAssignment(assignment)">
                            <div class="selection-card-header">
                                <h4 class="selection-card-title" x-text="assignment.name"></h4>
                                <span class="status-badge"
                                      :class="assignment.published ? 'status-success' : 'status-error'">
                                    <i :class="assignment.published ? 'ph-check-circle' : 'ph-x-circle'"></i>
                                    <span x-text="assignment.published ? 'Published' : 'Unpublished'"></span>
                                </span>
                            </div>
                            <div class="selection-card-body">
                                <p class="text-secondary mb-2">
                                    <i class="ph-calendar"></i>
                                    <span x-text="'Due: ' + formatDueDate(assignment.due_at)"></span>
                                </p>
                                <p class="text-secondary mb-2">
                                    <i class="ph-file-text"></i>
                                    <span x-text="'Submission: ' + formatSubmissionTypes(assignment.submission_types)"></span>
                                </p>
                                <p class="text-secondary">
                                    <i class="ph-hash"></i>
                                    <span x-text="'ID: ' + assignment.id"></span>
                                </p>
                            </div>

                            <!-- Selection feedback -->
                            <template x-if="isSelected(assignment.id)">
                                <div class="selection-feedback">
                                    <span class="checkmark">✓</span> Checking submissions...
                                </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="window.api.navigate_to('content_select.html')">
                        ← Back to Content Type
                    </button>
                    <button class="btn btn-primary" @click="loadAssignments()">
                        Retry
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* Colorful gradient cards for assignments */
.selection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
}

/* 5 Blue gradient variations (matching logo) */
.card-gradient-1::before {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.card-gradient-2::before {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.card-gradient-3::before {
    background: linear-gradient(135deg, #3b82f6 0%, var(--color-primary) 100%);
}

.card-gradient-4::before {
    background: linear-gradient(135deg, #60a5fa 0%, var(--color-primary-light) 100%);
}

.card-gradient-5::before {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
}

.selection-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.selection-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lightest);
}

.selection-card.selecting {
    animation: pulse 0.5s ease;
}

.selection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.selection-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-right: 1rem;
}

.selection-card-body p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selection-card-body i {
    color: var(--text-tertiary);
    font-size: 1rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.status-badge.status-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.status-badge.status-error {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

.selection-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--color-success);
    animation: slideIn 0.3s ease;
}

.checkmark {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--color-success);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    animation: checkmarkScale 0.3s ease;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes checkmarkScale {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
</style>
{% endblock %}

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