{% extends "base.html" %}

{% block title %}{{ 'Edit Kelas' if edit else 'Tambah Kelas' }}{% endblock %}
{% block page_title %}{{ 'Edit Kelas' if edit else 'Tambah Kelas' }}{% endblock %}

{% block content %}
<a href="{{ url_for('admin.kelas_list') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-primary-600 mb-6">
    <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="M15 19l-7-7 7-7"/></svg>
    Kembali
</a>

<div class="max-w-xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nama Kelas *</label>
                <input type="text" name="name" value="{{ kelas.name if edit else '' }}" required placeholder="Contoh: 7A, 8B, 9C"
                       class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none text-sm">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tahun Ajaran *</label>
                <input type="text" name="academic_year" value="{{ kelas.academic_year if edit else '2025/2026' }}" required placeholder="2025/2026"
                       class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all outline-none text-sm">
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit" class="px-6 py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
                    {{ 'Perbarui' if edit else 'Simpan' }}
                </button>
                <a href="{{ url_for('admin.kelas_list') }}" class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">Batal</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}