{% extends 'base.html' %}
{% load static %}
{% block content %}
<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">
                <div class="d-flex flex-center mb-15 ">
                    <a href="#">
                        
                        <img   src="{% static 'media/logos/logo-letter-9.png' %}" class="max-h-300px animate__animated animate__bounceInDown " alt="لوگو"/>
                    </a>
                </div>

                <div class="mb-20">
                    <h3>ورود به پنل مدیریت</h3>
                    <p class="opacity-60 font-weight-bold">نام کاربری و کلمه عبور خود را وارد کنید</p>
                </div>
 
                {% 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" class="form" id="kt_login_signin_form" action="{% url 'custom_login_view' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        {{ form.username }}
                    </div>
                    <div class="form-group">
                        {{ form.password }}
                    </div>
                    <div class="form-group d-flex flex-wrap justify-content-between align-items-center px-4">

                            <a href="{% url 'verify_identity' %}" class="text-white fw-bold text-decoration-none">کلمه عبور را فراموش کرده‌اید؟</a>
                        
                        
                    </div>
                    
                    <div class="form-group text-center mt-4">
                        <button id="kt_login_signin_submit" class="btn btn-outline-light fw-bold opacity-90 px-5 py-3 rounded-pill fs-5 w-100 text-white custom-hover">
                            ورود
                        </button>
                        
                        
                        
                    </div>
                    
                </form>
            </div>
        </div>
    </div>
</div>
<style>
    .custom-hover:hover {
        color: black !important; /* تغییر رنگ متن به مشکی هنگام هاور */
        background-color: white !important; /* تغییر پس‌زمینه به سفید */
        transition: all 0.3s ease-in-out; /* انیمیشن نرم */
    }
</style>

{% endblock %}