{% extends "base.html" %}

{% block title %}Aldudu Academy - Learning Management System{% endblock %}

{% block body %}
<!-- LOGIN PAGE -->
<div id="login-page" class="{% if current_user.is_authenticated %}hidden{% endif %} min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-100 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- Logo & Header -->
        <div class="text-center mb-8 animate-fade-in">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl shadow-lg mb-4">
                <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                </svg>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Aldudu Academy</h1>
            <p class="text-gray-600">Selamat datang! Silakan login untuk melanjutkan.</p>
        </div>

        <!-- Login Card -->
        <div id="login-card" class="bg-white rounded-2xl shadow-xl p-8 animate-slide-up">
            <form id="login-form" class="space-y-6">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                    <input type="email" id="email" name="email" placeholder="Masukkan email" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 outline-none">
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                    <input type="password" id="password" name="password" placeholder="Masukkan password" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 outline-none">
                </div>

                <div class="flex justify-end">
                    <a href="/forgot-password" class="text-xs text-primary-500 hover:text-primary-700 font-semibold hover:underline transition-colors">Lupa password?</a>
                </div>

                <div id="login-error" class="hidden p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm"></div>

                <button type="submit" id="login-btn"
                    class="w-full bg-gradient-to-r from-primary-500 to-primary-700 text-white py-4 px-6 rounded-2xl font-bold shadow-xl shadow-primary-200 hover:shadow-2xl hover:from-primary-600 hover:to-primary-800 transform hover:-translate-y-1 transition-all duration-300 relative overflow-hidden group">
                    <span class="btn-text inline-flex items-center transition-all duration-300 group-hover:tracking-widest">Login ke Akun</span>
                    <div class="loader-container hidden absolute inset-0 flex items-center justify-center bg-inherit backdrop-blur-sm">
                        <svg class="animate-spin h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </div>
                </button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-sm text-gray-500">Belum punya akun? <a href="#" onclick="toggleAuthMode(event, 'register')" class="text-primary-600 font-bold hover:underline">Daftar sekarang</a></p>
            </div>
        </div>

        <!-- Register Card -->
        <div id="register-card" class="hidden bg-white rounded-2xl shadow-xl p-8 animate-slide-up">
            <form id="register-form" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
                    <input type="text" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <input type="password" name="password" required class="w-full px-4 py-3 border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Daftar Sebagai</label>
                    <select name="role" class="w-full px-4 py-3 border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary-500 bg-white font-bold">
                        <option value="murid">Murid (Siswa)</option>
                        <option value="guru">Guru (Pengajar)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pilih Sekolah</label>
                    <select name="school_id" id="register-school" class="w-full px-4 py-3 border border-gray-300 rounded-xl outline-none focus:ring-2 focus:ring-primary-500 bg-white font-bold" required>
                        <option value="">Pilih sekolah Anda...</option>
                    </select>
                    <p class="text-xs text-gray-400 mt-1">Pastikan memilih sekolah yang benar untuk enroll otomatis</p>
                </div>
                <div id="register-error" class="hidden p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-xs"></div>
                <button type="submit" class="w-full bg-primary-600 text-white py-4 rounded-xl font-bold hover:bg-primary-700 transition-all shadow-lg">Daftar Akun</button>
            </form>
            <div class="mt-6 text-center">
                <p class="text-sm text-gray-500">Sudah punya akun? <a href="#" onclick="toggleAuthMode(event, 'login')" class="text-primary-600 font-bold hover:underline">Masuk di sini</a></p>
            </div>
        </div>

        <!-- Footer -->
        <p class="text-center text-gray-500 text-sm mt-6">&copy; 2025 Aldudu Academy. All rights reserved.</p>
    </div>
</div>

<!-- APP PAGE -->
<div id="app-page" class="{% if not current_user.is_authenticated %}hidden{% endif %} h-screen h-[100dvh] bg-gray-50 flex overflow-hidden">
    <!-- Sidebar -->
    {% include '_sidebar.html' %}

    <!-- Main Content Area -->
    <div id="main-content" class="flex-1 flex flex-col min-w-0 sidebar-transition h-full">
        <!-- Top Header -->
        <header class="bg-white border-b border-gray-200 h-16 flex items-center pl-4 pr-0 sticky top-0 z-30">
            <div class="flex items-center">
                <!-- Desktop/Tablet Unhide Toggle -->
                <button id="sidebar-unhide-btn" onclick="SidebarManager.toggle()" class="mr-4 sidebar-toggle-btn hidden" title="Tampilkan Sidebar">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>

                <div class="flex items-center lg:hidden">
                    <!-- Hamburger Menu Hidden on Mobile as we use Bottom Nav -->
                    <button class="p-2 text-gray-600 hidden md:block">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                    <div class="flex items-center space-x-2 md:ml-2">
                        <div class="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center shadow-md">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                            </svg>
                        </div>
                        <span class="text-lg font-black bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">Aldudu</span>
                    </div>
                </div>
            </div>
            
            <!-- Tahun Ajaran Flush to the right edge -->
            <div class="ml-auto h-full flex items-center">
                <div class="flex items-center space-x-2 bg-primary-50 pl-4 pr-6 py-2.5 rounded-l-2xl border-y border-l border-primary-100 shadow-premium whitespace-nowrap">
                    <span class="text-[10px] sm:text-xs font-black text-primary-400 uppercase tracking-widest">Tahun Ajaran</span>
                    <span class="text-xs sm:text-sm font-bold text-primary-700">2025/2026</span>
                </div>
            </div>
        </header>

        <!-- Main Scrollable Area -->
        <main class="flex-1 overflow-y-auto p-4 sm:p-8">
            <div class="max-w-6xl mx-auto space-y-8">
                <!-- Welcome & Stats -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="md:col-span-2 bg-gradient-to-br from-primary-600 to-primary-800 rounded-3xl p-6 sm:p-8 text-white relative overflow-hidden shadow-xl shadow-primary-200">
                        <div class="relative z-10">
                            <h1 id="welcome-title" class="text-2xl sm:text-3xl font-bold mb-2">Selamat Datang!</h1>
                            <p id="dynamic-quote" class="text-primary-100 opacity-90 max-w-md text-sm sm:text-base min-h-[3rem] flex items-center">
                                <span class="typing-text">Lanjutkan perjalanan belajarmu hari ini. Kamu memiliki beberapa aktivitas yang menunggu.</span>
                            </p>
                        </div>
                        <div class="absolute right-0 bottom-0 opacity-10 pointer-events-none transform translate-y-1/4 translate-x-1/4 hidden sm:block">
                            <svg class="w-64 h-64" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                            </svg>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex flex-col justify-between">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-sm font-bold text-gray-400 uppercase tracking-wider">Ringkasan</span>
                            <div class="p-2 bg-primary-50 text-primary-600 rounded-xl">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                                </svg>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p id="total-classes" class="text-2xl sm:text-3xl font-bold text-gray-900">0</p>
                                <p class="text-xs text-gray-500 font-medium mt-1">Total Kelas</p>
                            </div>
                            <div>
                                <p id="total-students" class="text-2xl sm:text-3xl font-bold text-gray-900">0</p>
                                <p class="text-xs text-gray-500 font-medium mt-1">Total Murid</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions / Enroll -->
                <section id="enroll-section" class="hidden">
                    <div class="bg-white rounded-3xl p-6 sm:p-8 border border-gray-100 shadow-sm">
                        <div class="flex items-center space-x-4 mb-6">
                            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-50 text-green-600 rounded-2xl flex items-center justify-center">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                            <div>
                                <h2 class="text-lg sm:text-xl font-bold text-gray-900">Gabung Kelas Baru</h2>
                                <p class="text-xs sm:text-sm text-gray-500">Gunakan kode kelas dari gurumu.</p>
                            </div>
                        </div>
                        <form id="enroll-form" class="flex flex-col sm:flex-row items-stretch sm:items-center space-y-3 sm:space-y-0 sm:space-x-4">
                            <input type="text" id="class-code-input" placeholder="KODE-KELAS" 
                                class="flex-1 px-5 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-primary-500 text-base sm:text-lg font-bold tracking-widest placeholder:font-normal placeholder:tracking-normal">
                            <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-8 py-4 rounded-2xl font-bold transition-all shadow-lg shadow-primary-200 active:scale-95">
                                Gabung
                            </button>
                        </form>
                    </div>
                </section>

                <!-- Class List Section -->
                <section>
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
                        <div>
                            <h2 class="text-2xl sm:text-3xl font-black text-gray-900 tracking-tight">Kelas Saya</h2>
                            <p class="text-xs sm:text-sm text-gray-500 mt-1 font-medium">Kelola dan pantau aktivitas belajar Anda.</p>
                        </div>
                        
                        <div class="flex flex-wrap items-center gap-3">
                            <!-- Sorting Controls -->
                            <div class="flex items-center space-x-1 bg-white p-1 rounded-2xl shadow-sm border border-gray-100 overflow-x-auto">
                                <button onclick="Dashboard.setSortMode('manual')" id="sort-manual" 
                                    class="sort-btn px-3 sm:px-4 py-2 rounded-xl text-[9px] sm:text-[10px] font-black uppercase tracking-[0.1em] sm:tracking-[0.15em] transition-all flex items-center space-x-1.5 sm:space-x-2 group shrink-0">
                                    <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
                                    <span>Manual</span>
                                </button>
                                <button onclick="Dashboard.setSortMode('asc')" id="sort-asc" 
                                    class="sort-btn px-3 sm:px-4 py-2 rounded-xl text-[9px] sm:text-[10px] font-black uppercase tracking-[0.1em] sm:tracking-[0.15em] transition-all flex items-center space-x-1.5 sm:space-x-2 group shrink-0">
                                    <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/></svg>
                                    <span>A-Z</span>
                                </button>
                                <button onclick="Dashboard.setSortMode('desc')" id="sort-desc" 
                                    class="sort-btn px-3 sm:px-4 py-2 rounded-xl text-[9px] sm:text-[10px] font-black uppercase tracking-[0.1em] sm:tracking-[0.15em] transition-all flex items-center space-x-1.5 sm:space-x-2 group shrink-0">
                                    <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/></svg>
                                    <span>Z-A</span>
                                </button>
                            </div>

                            <button id="create-class-btn" class="hidden px-5 sm:px-6 py-3 bg-primary-600 text-white rounded-2xl font-bold text-xs sm:text-sm hover:bg-primary-700 transition-all flex items-center space-x-2 shadow-lg shadow-primary-200 active:scale-95 shrink-0">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
                                </svg>
                                <span>Buat Kelas</span>
                            </button>
                        </div>
                    </div>

                    <!-- Skeleton Loading -->
                    <div id="class-skeleton" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div class="bg-white rounded-3xl h-64 animate-pulse border border-gray-100 p-6 flex flex-col space-y-4">
                            <div class="h-8 bg-gray-100 rounded-xl w-3/4"></div>
                            <div class="h-4 bg-gray-100 rounded-lg w-1/2"></div>
                            <div class="flex-1"></div>
                            <div class="h-12 bg-gray-50 rounded-2xl"></div>
                        </div>
                    </div>

                    <!-- Grid Kelas -->
                    <div id="class-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"></div>
                    
                    <!-- Empty State -->
                    <div id="empty-state" class="hidden bg-white rounded-3xl p-12 text-center border-2 border-dashed border-gray-200">
                        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-10 h-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Belum ada kelas</h3>
                        <p class="text-gray-500 mb-8 max-w-sm mx-auto">Minta kode kelas dari guru Anda untuk bergabung dengan kelas.</p>
                        <button id="empty-create-btn" class="px-8 py-3 bg-primary-600 text-white rounded-2xl font-bold shadow-lg shadow-primary-200">
                            Buat Kelas Pertama
                        </button>
                    </div>
                </section>

                <!-- CLASSROOM VIEW SECTION -->
                <section id="classroom-view" class="hidden">
                    <!-- Classroom Header with My Grades Link -->
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
                        <div>
                            <h2 class="text-2xl sm:text-3xl font-black text-gray-900 tracking-tight">Ruang Kelas</h2>
                            <p class="text-xs sm:text-sm text-gray-500 mt-1 font-medium">Lihat semua tugas, kuis, dan file dari kelas Anda.</p>
                        </div>
                        <div class="flex items-center gap-2">
                            {% if current_user.is_authenticated %}
                            <a href="#" class="archive-btn px-6 py-3 bg-amber-100 text-amber-700 rounded-2xl font-bold text-xs sm:text-sm hover:bg-amber-200 transition-all flex items-center space-x-2 shadow-sm shrink-0" data-course-id="">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                                </svg>
                                <span>Arsip</span>
                            </a>
                            {% endif %}
                            <a href="{{ url_for('gradebook.my_grades_index') }}" class="px-6 py-3 bg-primary-600 text-white rounded-2xl font-bold text-xs sm:text-sm hover:bg-primary-700 transition-all flex items-center space-x-2 shadow-lg shadow-primary-200 active:scale-95 shrink-0">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                </svg>
                                <span data-i18n="nav.my_grades">Nilai Saya</span>
                            </a>
                        </div>
                    </div>

                    <!-- Archive Selection Modal -->
                    <div id="archive-select-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
                        <div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md overflow-hidden animate-slide-up">
                            <div class="bg-gradient-to-br from-amber-500 to-amber-700 px-8 py-6 text-white">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 class="text-xl font-black">Pilih Kelas</h3>
                                        <p class="text-amber-100 text-sm mt-0.5">Lihat arsip kelas yang diinginkan</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-6">
                                <div id="archive-class-list" class="space-y-2 max-h-96 overflow-y-auto">
                                    <!-- Class list will be populated here -->
                                </div>
                                <button onclick="closeArchiveModal()" class="w-full mt-4 px-5 py-3.5 bg-gray-100 text-gray-700 rounded-2xl font-bold hover:bg-gray-200 transition-all">
                                    Batal
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Filter Dropdowns -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-8">
                        <select id="classroom-filter" class="flex-1 px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all font-semibold text-gray-700 shadow-sm">
                            <option value="all" data-i18n="filter.all_items">Semua Item</option>
                            <option value="recent" data-i18n="filter.recent">Terbaru</option>
                            <option value="assignments" data-i18n="filter.assignments">Tugas</option>
                            <option value="quizzes" data-i18n="filter.quizzes">Kuis</option>
                            <option value="files" data-i18n="filter.files">File</option>
                        </select>

                        <select id="classroom-sort" class="flex-1 px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all font-semibold text-gray-700 shadow-sm">
                            <option value="due-asc" data-i18n="filter.due_soon">Tenggat Waktu: Terdekat</option>
                            <option value="due-desc" data-i18n="filter.due_latest">Tenggat Waktu: Terjauh</option>
                            <option value="recent" data-i18n="filter.recently_added">Ditambahkan: Terbaru</option>
                        </select>
                    </div>

                    <!-- Classroom Items List -->
                    <div id="classroom-items" class="space-y-4">
                        <!-- Items will be populated here -->
                    </div>

                    <!-- Empty State for Classroom View -->
                    <div id="classroom-empty-state" class="hidden bg-white rounded-3xl p-12 text-center border-2 border-dashed border-gray-200">
                        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-10 h-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Tidak ada item</h3>
                        <p class="text-gray-500">Semua tugas Anda sudah selesai! Bagus sekali.</p>
                    </div>
                </section>
            </div>
        </main>
    </div>
</div>

<!-- ADD CLASS MODAL -->
<div id="add-class-modal" class="modal fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-slide-up">
        <form id="add-class-form">
            <div class="bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-4">
                <h3 class="text-xl font-bold text-white">Buat Kelas Baru</h3>
                <p class="text-primary-100 text-sm mt-1">Buat kelas baru untuk tahun ajaran yang sedang aktif.</p>
            </div>
            <div class="p-6">
                <div class="mb-6">
                    <label for="course-name" class="block text-sm font-medium text-gray-700 mb-2">Nama Kelas</label>
                    <input type="text" id="course-name" name="course-name" required placeholder="Contoh: Kimia XII - IPA 1" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all">
                </div>
                <div class="mb-4">
                    <label for="add-color-input" class="block text-sm font-medium text-gray-700 mb-3">Pilih Warna Kartu</label>
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-2xl border border-gray-100">
                        <input type="color" id="add-color-input" name="color" value="#3b82f6" 
                            class="w-16 h-16 rounded-xl cursor-pointer border-none bg-transparent">
                        <div>
                            <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Custom Color</p>
                            <p class="text-sm text-gray-500">Pilih warna sesuka hati untuk identitas kelas ini.</p>
                        </div>
                    </div>
                </div>
                <div id="add-modal-error" class="hidden mt-2 text-red-600 text-sm"></div>
            </div>
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                <button type="button" id="add-cancel-button" 
                    class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Batal
                </button>
                <button type="submit" 
                    class="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-lg font-medium shadow hover:shadow-md transition-all">
                    Simpan Kelas
                </button>
            </div>
        </form>
    </div>
</div>

<!-- SHOW CODE MODAL -->
<div id="show-code-modal" class="modal fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md text-center animate-slide-up">
        <div class="p-6">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Kelas Berhasil Dibuat!</h3>
            <p class="text-gray-600 mb-6">Bagikan kode berikut kepada murid Anda untuk bergabung.</p>
            <div id="generated-class-code" class="bg-gray-100 rounded-xl p-4 mb-4">
                <span class="text-2xl font-mono font-bold text-gray-900 tracking-wider"></span>
            </div>
            <p id="copy-feedback" class="text-sm text-gray-500"></p>
        </div>
        <div class="bg-gray-50 px-6 py-4">
            <button type="button" id="close-code-modal-button" 
                class="w-full px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-lg font-medium shadow hover:shadow-md transition-all">
                Selesai
            </button>
        </div>
    </div>
</div>

<!-- EDIT CLASS MODAL -->
<div id="edit-class-modal" class="modal fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-slide-up">
        <form id="edit-class-form">
            <div class="bg-gradient-to-r from-primary-500 to-primary-700 px-6 py-4">
                <h3 class="text-xl font-bold text-white">Edit Kelas</h3>
                <p class="text-primary-100 text-sm mt-1">Ubah nama dan warna latar belakang untuk kelas ini.</p>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label for="edit-course-name" class="block text-sm font-medium text-gray-700 mb-2">Nama Kelas</label>
                    <input type="text" id="edit-course-name" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none">
                </div>
                <div class="mb-4">
                    <label for="edit-color-input" class="block text-sm font-medium text-gray-700 mb-3">Warna Latar</label>
                    <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-2xl border border-gray-100">
                        <input type="color" id="edit-color-input" name="color" 
                            class="w-16 h-16 rounded-xl cursor-pointer border-none bg-transparent">
                        <div>
                            <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Custom Color</p>
                            <p class="text-sm text-gray-500">Ubah nuansa warna untuk kelas ini.</p>
                        </div>
                    </div>
                </div>
                <div id="edit-modal-error" class="hidden text-red-600 text-sm"></div>
            </div>
            <div class="bg-gray-50 px-6 py-4 flex justify-between items-center">
                <button type="button" onclick="Dashboard.openDeleteModal()" 
                    class="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg font-bold transition-all flex items-center space-x-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    <span>Hapus Kelas</span>
                </button>
                <div class="flex space-x-3">
                    <button type="button" id="edit-cancel-button" 
                        class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        Batal
                    </button>
                    <button type="submit" 
                        class="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-lg font-medium shadow hover:shadow-md transition-all">
                        Simpan Perubahan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- DELETE CLASS MODAL -->
<div id="delete-class-modal" class="modal fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md overflow-hidden animate-slide-up border border-red-50">
        <div class="bg-gradient-to-br from-red-600 to-red-800 px-8 py-10 text-center relative overflow-hidden">
            <div class="absolute inset-0 opacity-10">
                <svg class="w-full h-full" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <path d="M0 0 L100 100 L100 0 Z" />
                </svg>
            </div>
            <div class="relative z-10">
                <div class="w-24 h-24 bg-white/20 rounded-[2rem] flex items-center justify-center mx-auto mb-6 backdrop-blur-md shadow-inner border border-white/30">
                    <svg class="w-12 h-12 text-white animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <h3 class="text-3xl font-black text-white mb-2 tracking-tight">Hapus Kelas?</h3>
                <div class="inline-block px-4 py-1.5 bg-red-900/30 rounded-full border border-red-400/30">
                    <p class="text-red-100 text-xs font-black uppercase tracking-widest">Aksi Tidak Dapat Diurungkan</p>
                </div>
            </div>
        </div>
        <div class="p-8">
            <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-2xl mb-8">
                <p class="text-red-800 text-sm font-bold leading-relaxed">
                    PERHATIAN: Menghapus kelas ini akan mengakibatkan seluruh data murid berupa <span class="underline">nilai</span>, <span class="underline">tugas</span>, dan <span class="underline">ulangan</span> hilang secara permanen dari sistem.
                </p>
            </div>
            
            <div class="space-y-4">
                <p class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] text-center">Konfirmasi penghapusan</p>
                <div class="relative group">
                    <input type="text" id="delete-confirm-input" placeholder="Ketik 'setuju' di sini..." 
                        class="w-full px-6 py-5 bg-gray-50 border-2 border-gray-100 rounded-2xl focus:border-red-500 focus:bg-white focus:ring-4 focus:ring-red-500/10 text-center font-black text-xl transition-all outline-none placeholder:text-gray-300 placeholder:font-bold">
                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none opacity-0 group-focus-within:opacity-100 transition-opacity">
                        <svg class="w-6 h-6 text-red-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                    </div>
                </div>
            </div>
            
            <div id="delete-modal-error" class="hidden mt-4 text-red-600 text-sm font-bold text-center bg-red-50 p-3 rounded-xl animate-shake"></div>
        </div>
        <div class="px-8 pb-8 grid grid-cols-2 gap-4">
            <button type="button" id="delete-cancel-btn" 
                class="px-6 py-4 text-gray-500 bg-gray-100 rounded-2xl hover:bg-gray-200 font-black text-sm uppercase tracking-widest transition-all active:scale-95">
                Batal
            </button>
            <button type="button" id="delete-final-btn" disabled
                class="px-6 py-4 bg-red-600 text-white rounded-2xl font-black text-sm uppercase tracking-widest shadow-xl shadow-red-200 transition-all opacity-50 cursor-not-allowed hover:bg-red-700 hover:shadow-red-300 active:scale-95 disabled:hover:translate-y-0">
                Hapus Sekarang
            </button>
        </div>
    </div>
</div>

<!-- UNDO NOTIFICATION TOAST -->
<div id="delete-toast-container" class="fixed bottom-8 right-8 z-[100] flex flex-col space-y-4 pointer-events-none"></div>

{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='dashboard.js') }}?v={{ asset_hash('dashboard.js') }}"></script>

<!-- Dynamic Quote with Typing Effect -->
<style>
    #dynamic-quote {
        position: relative;
        min-height: 4.5rem; /* Space for 2 lines */
    }
    
    .typing-text {
        display: inline;
        overflow: hidden;
        border-right: 2px solid rgba(255,255,255,0.5);
        white-space: normal; /* Allow wrapping for multi-line */
        word-wrap: break-word;
        line-height: 1.6;
    }
    
    .typing-text.typing-active {
        animation: blink-caret 0.75s step-end infinite;
    }
    
    .typing-text.typing-complete {
        border-right: none; /* Remove cursor when complete */
    }
    
    .quote-fade {
        animation: fadeOut 0.5s ease-out forwards;
    }
    
    @keyframes blink-caret {
        from, to { border-color: transparent }
        50% { border-color: rgba(255,255,255,0.5) }
    }
    
    @keyframes fadeOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-10px); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<script>
// Dynamic Educational Quotes with Typing Effect
const educationalQuotes = [
    "Lanjutkan perjalanan belajarmu hari ini. Kamu memiliki beberapa aktivitas yang menunggu.",
    "Pendidikan adalah senjata paling mematikan di dunia, karena dengan pendidikan Anda dapat mengubah dunia.",
    "Perjalanan ribuan mil dimulai dengan satu langkah. Mulailah belajar hari ini!",
    "Investasi terbaik adalah investasi dalam pengetahuan dirimu sendiri.",
    "Pendidikan bukan persiapan untuk hidup; pendidikan adalah kehidupan itu sendiri.",
    "Akar pendidikan memang pahit, tapi buahnya manis.",
    "Belajar tanpa berpikir itu sia-sia. Berpikir tanpa belajar itu berbahaya.",
    "Pendidikan adalah tiket ke masa depan. Hari esok milik orang yang mempersiapkannya hari ini.",
    "Jangan berhenti belajar, karena hidup tidak pernah berhenti mengajarkan.",
    "Pendidikan adalah cahaya yang menerangi dunia.",
    "Orang yang berhenti belajar adalah orang yang sudah tua, meskipun usianya masih muda.",
    "Belajar adalah harta karun yang akan mengikuti pemiliknya ke mana saja.",
    "Pendidikan membantu kita menjadi siapa kita sebenarnya.",
    "Kegagalan adalah bumbu yang memberi rasa pada pendidikan.",
    "Pendidikan adalah proses seumur hidup dari kelahiran hingga kematian.",
    "Belajar tanpa batas adalah kunci untuk meraih impianmu.",
    "Pendidikan bukan hanya mengisi ember, tapi menyalakan api.",
    "Setiap buku adalah pintu ke dunia baru. Membacalah, belajarlah, tumbuhlah.",
    "Pendidikan adalah kekuatan untuk mengubah dunia menjadi lebih baik.",
    "Belajar hari ini, memimpin besok. Masa depanmu dimulai sekarang."
];

// localStorage keys
const QUOTE_INDEX_KEY = 'aldudu_quote_index';
const QUOTE_TIMESTAMP_KEY = 'aldudu_quote_timestamp';
const QUOTE_INTERVAL = 10000; // 10 seconds

// Get current quote index from localStorage or start fresh
function getCurrentQuoteIndex() {
    const storedIndex = localStorage.getItem(QUOTE_INDEX_KEY);
    const storedTime = localStorage.getItem(QUOTE_TIMESTAMP_KEY);
    const now = Date.now();
    
    // If no stored data or it's been more than 10 seconds since last change
    if (!storedIndex || !storedTime || (now - parseInt(storedTime)) >= QUOTE_INTERVAL) {
        let newIndex;
        if (storedIndex !== null) {
            // Get next quote, loop back to 0 if at end
            newIndex = (parseInt(storedIndex) + 1) % educationalQuotes.length;
        } else {
            // First time - random start
            newIndex = Math.floor(Math.random() * educationalQuotes.length);
        }
        
        // Save new index and timestamp
        localStorage.setItem(QUOTE_INDEX_KEY, newIndex.toString());
        localStorage.setItem(QUOTE_TIMESTAMP_KEY, now.toString());
        
        return newIndex;
    }
    
    // Still within 10 seconds, keep current quote
    return parseInt(storedIndex);
}

// Typewriter effect for multi-line text
function typeWriter(text, element, speed = 50) {
    let i = 0;
    element.textContent = '';
    element.classList.remove('typing-complete');
    element.classList.add('typing-active');
    
    function type() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(() => type(), speed);
        } else {
            element.classList.remove('typing-active');
            element.classList.add('typing-complete');
        }
    }
    
    type();
}

// Update quote with typing effect
function updateQuote() {
    const quoteElement = document.getElementById('dynamic-quote');
    if (!quoteElement) return;
    
    const index = getCurrentQuoteIndex();
    const quote = educationalQuotes[index];
    
    // Calculate typing speed based on quote length (faster for longer quotes)
    const typingSpeed = Math.max(30, Math.min(80, 4000 / quote.length));
    
    // Fade out
    quoteElement.classList.add('quote-fade');
    
    // After fade out, change text and fade in
    setTimeout(() => {
        quoteElement.innerHTML = '<span class="typing-text"></span>';
        
        const textSpan = quoteElement.querySelector('.typing-text');
        quoteElement.classList.remove('quote-fade');
        quoteElement.style.animation = 'fadeIn 0.5s ease-out forwards';
        
        // Start typing effect
        typeWriter(quote, textSpan, typingSpeed);
        
        // Remove animation class after completion
        setTimeout(() => {
            quoteElement.style.animation = '';
        }, 500);
        
        // Update timestamp
        localStorage.setItem(QUOTE_TIMESTAMP_KEY, Date.now().toString());
    }, 500);
}

// Check for quote update - handles background tab scenario
function checkQuoteUpdate() {
    const storedTime = localStorage.getItem(QUOTE_TIMESTAMP_KEY);
    const now = Date.now();
    
    // If more than 10 seconds since last update, refresh quote
    if (!storedTime || (now - parseInt(storedTime)) >= QUOTE_INTERVAL) {
        updateQuote();
    }
}

// Initialize dynamic quotes
let quoteCheckInterval;

document.addEventListener('DOMContentLoaded', function() {
    // Initial quote
    setTimeout(updateQuote, 100);
    
    // Check every 2 seconds if quote needs updating (handles background tabs)
    quoteCheckInterval = setInterval(checkQuoteUpdate, 2000);
    
    // Also update when page becomes visible again
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) {
            checkQuoteUpdate();
        }
    });
    
    // Clean up on page unload
    window.addEventListener('beforeunload', function() {
        clearInterval(quoteCheckInterval);
    });
});
</script>
{% endblock %}