{% extends "base.html" %}

{% block title %}تسجيل الدخول - نظام إدارة روضة الأطفال{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-5 col-md-7">
            <div class="card border-0 shadow-lg">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <i class="fas fa-child fa-4x text-primary mb-3"></i>
                        <h2 class="fw-bold">تسجيل الدخول</h2>
                        <p class="text-muted">أدخل بياناتك للوصول إلى النظام</p>
                    </div>

                    <form method="POST">
                        <div class="mb-4">
                            <label for="username" class="form-label fw-bold">
                                <i class="fas fa-user me-2"></i>اسم المستخدم
                            </label>
                            <input type="text" class="form-control form-control-lg" id="username" name="username" required>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label fw-bold">
                                <i class="fas fa-lock me-2"></i>كلمة المرور
                            </label>
                            <input type="password" class="form-control form-control-lg" id="password" name="password" required>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                            <i class="fas fa-sign-in-alt me-2"></i>
                            دخول
                        </button>
                    </form>

                    <div class="text-center">
                        <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-right me-2"></i>
                            العودة للصفحة الرئيسية
                        </a>
                    </div>

                    <!-- Demo Accounts Info -->
                    <div class="mt-4 p-3 bg-light rounded">
                        <h6 class="fw-bold mb-2">حسابات تجريبية:</h6>
                        <small class="text-muted">
                            <strong>الإدارة:</strong> admin / admin123<br>
                            <strong>معلم:</strong> teacher1 / teacher123<br>
                            <strong>ولي أمر:</strong> parent1 / parent123
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}