{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
    /* استایل‌دهی فرم */
form p {
    margin-bottom: 1.5rem;
    color: white;
}

/* استایل لیبل‌ها */
form p label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}

/* استایل فیلدهای ورودی */
form p input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
}

/* فیلدها در هنگام فوکوس */
form p input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* پیام‌های خطا */
.alert-danger {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid red;
    color: red;
    padding: 0.75rem 1.25rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

/* استایل دکمه */
button[type="submit"] {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 0.75rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    background-color: white;
    color: black;
}

</style>
<div class="d-flex flex-column flex-root">
    <div class="login login-3 login-signin-on d-flex flex-row-fluid" id="kt_login">
        <div class="d-flex flex-center bgi-size-cover bgi-no-repeat flex-row-fluid" style="background-image: url('{% static "media/bg/bg-1.jpg" %}');">
            <div class="login-form text-center text-white p-7 position-relative overflow-hidden">
                <h3>تأیید هویت</h3>
                <p>لطفاً کد ملی و تاریخ تولد و نام پدر خود را وارد کنید.</p>

                {% if form.errors %}
                    <div class="alert alert-danger">
                        <ul>
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                <form method="post">
                    {% csrf_token %}
                    {{ form.as_p }}
                    <button type="submit" class="btn btn-pill btn-outline-white font-weight-bold opacity-90 px-15 py-3">تأیید</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}