{% extends "base.html" %}

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

{% block content %}
<a href="{{ url_for('admin.murid_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 Lengkap *</label>
                <input type="text" name="name" value="{{ murid.name if edit else '' }}" required
                       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">Email *</label>
                <input type="email" name="email" value="{{ murid.email if edit else '' }}" required
                       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">Password {{ '(kosongkan jika tidak diubah)' if edit else '*' }}</label>
                <input type="password" name="password" {{ '' if edit else 'required' }}
                       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">Kelas</label>
                <select name="kelas_id" 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">
                    <option value="">-- Pilih Kelas --</option>
                    {% for kelas in kelas_list %}
                    <option value="{{ kelas.id }}" {% if edit and current_enrollment and current_enrollment.kelas_id == kelas.id %}selected{% endif %}>
                        {{ kelas.name }} ({{ kelas.academic_year }})
                    </option>
                    {% endfor %}
                </select>
            </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.murid_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 %}