{% 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-md">
        <!-- Logo Card -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-20 h-20 islamic-pattern-bg rounded-2xl shadow-lg mb-4">
                <svg class="w-10 h-10 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-800">Iqra Path</h1>
            <p class="text-gray-500 mt-1 font-arabic text-lg">"اقرأ باسم ربك الذي خلق"</p>
            <p class="text-gray-400 text-sm mt-1">3T App by Alsen 22</p>
        </div>

        <!-- Login Form -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
            <div class="islamic-divider mb-6">
                <span class="text-sm font-medium">Masuk ke Akun</span>
            </div>

            <form method="POST" action="{{ url_for('auth.login') }}" class="space-y-5">
                {{ form.hidden_tag() }}

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    {{ form.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="nama@email.com") }}
                    {% for error in form.email.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ error }}</p>
                    {% endfor %}
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    {{ form.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="Masukkan password") }}
                    {% for error in form.password.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ error }}</p>
                    {% endfor %}
                </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">
                    Masuk
                </button>
            </form>

            <div class="mt-6 text-center">
                <p class="text-sm text-gray-500">Belum punya akun sekolah?</p>
                <a href="{{ url_for('auth.register_school') }}" class="inline-block mt-2 text-sm font-semibold text-primary-600 hover:text-primary-700 transition-colors">
                    Daftarkan Sekolah Anda &rarr;
                </a>
            </div>
        </div>

        <p class="text-center text-xs text-gray-400 mt-6">&copy; 2026 Iqra Path. Bismillah.</p>
    </div>
</div>
{% endblock %}