{% extends "base.html" %}

{% block auth_content %}
<div class="min-h-screen flex items-center justify-center islamic-pattern-light py-12 px-4">
    <div class="w-full max-w-2xl">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 islamic-pattern-bg rounded-2xl shadow-lg mb-4">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-800">Daftarkan Sekolah Anda</h1>
            <p class="text-gray-500 text-sm mt-1">Isi formulir di bawah untuk mendaftarkan sekolah ke Iqra Path</p>
        </div>

        <!-- Registration Form -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
            <form method="POST" action="{{ url_for('auth.register_school') }}" class="space-y-6">
                {{ form.hidden_tag() }}

                <!-- School Information -->
                <div>
                    <div class="islamic-divider mb-4">
                        <span class="text-sm font-medium">Informasi Sekolah</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nama Sekolah *</label>
                            {{ form.school_name(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", placeholder="MTs/MA/SD Islam ...") }}
                            {% for error in form.school_name.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">NPSN *</label>
                            {{ form.npsn(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", placeholder="Nomor Pokok Sekolah Nasional") }}
                            {% for error in form.npsn.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Telepon</label>
                            {{ form.school_phone(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", placeholder="021-xxxxxxx") }}
                            {% for error in form.school_phone.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email Sekolah</label>
                            {{ form.school_email(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", placeholder="info@sekolah.sch.id") }}
                            {% for error in form.school_email.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Alamat *</label>
                            {{ form.address(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", rows="2", placeholder="Alamat lengkap sekolah") }}
                            {% for error in form.address.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Admin Information -->
                <div>
                    <div class="islamic-divider mb-4">
                        <span class="text-sm font-medium">Akun Admin Sekolah</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nama Admin *</label>
                            {{ form.admin_name(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", placeholder="Nama lengkap admin sekolah") }}
                            {% for error in form.admin_name.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email Admin *</label>
                            {{ form.admin_email(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", placeholder="admin@email.com") }}
                            {% for error in form.admin_email.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Password *</label>
                            {{ form.admin_password(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", placeholder="Minimal 6 karakter") }}
                            {% for error in form.admin_password.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password *</label>
                            {{ form.admin_password_confirm(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", placeholder="Ulangi password") }}
                            {% for error in form.admin_password_confirm.errors %}<p class="text-red-500 text-xs mt-1">{{ error }}</p>{% endfor %}
                        </div>
                    </div>
                </div>

                <div class="bg-primary-50 rounded-xl p-4 text-sm text-primary-800">
                    <div class="flex gap-2">
                        <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <p>Setelah mendaftar, sekolah Anda akan diverifikasi oleh Super Admin. Anda bisa login setelah pendaftaran, namun akses penuh akan tersedia setelah verifikasi disetujui.</p>
                    </div>
                </div>

                <button type="submit" class="w-full islamic-pattern-bg text-white py-3 rounded-xl font-semibold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-primary-200">
                    Daftarkan Sekolah
                </button>
            </form>

            <div class="mt-6 text-center">
                <a href="{{ url_for('auth.login') }}" class="text-sm text-gray-500 hover:text-primary-600 transition-colors">&larr; Kembali ke halaman login</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}