{% extends "layouts/base.html" %}

{% load static %}

{% block title %} Reset Password - Adtlas {% endblock title %}

{% block extra_css %}
<style type="text/css">
    .alert {
        color: #721c24;
        text-align: center;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
    }
    .alert-danger {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
    }
    .alert-success {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }
    
    .form-field-wrapper {
        margin-bottom: 15px;
    }
    
    .field-errors {
        color: #dc3545;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .back-to-login {
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    
    .back-to-login a {
        color: #007bff;
        text-decoration: none;
    }
    
    .back-to-login a:hover {
        text-decoration: underline;
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="login-img">
    <div class="page">
        <div class="">
            <div class="col col-login mx-auto">
            </div>
            <div class="container-login100">
                <div class="wrap-login100 p-0">
                    <div class="card-body">
                        <form class="login100-form validate-form" method="post">
                            {% csrf_token %}
                            
                            <span class="login100-form-title">
                                <a href="{% url 'core:landing' %}" class="logo-default">
                                    <img alt="Adtlas Project Logo" class="logo-default" src="{% static 'images/brands/logo_black.png' %}" width="171">
                                </a>
                                <h4 style="margin-top: 15px;">Reset Password</h4>
                                <p style="color: #666; font-size: 14px; margin-top: 10px;">
                                    Enter your email address and we'll send you a link to reset your password.
                                </p>
                            </span> 
                            
                            <!-- Email Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.email }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-email" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.email.errors %}
                                    <div class="field-errors">
                                        {% for error in form.email.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- Submit Button -->
                            <div class="container-login100-form-btn">
                                <button type="submit" class="login100-form-btn btn-primary">
                                    Send Reset Link
                                </button>
                            </div> 
                            <!-- Back to Login Link -->
                            <div class="back-to-login">
                                <p class="text-dark mb-0">
                                    <a href="{% url 'authentication:login' %}">
                                        <i class="zmdi zmdi-arrow-left"></i> Back to Login
                                    </a>
                                </p>
                            </div> 
                            <!-- Footer -->
                            <div class="text-center pt-3">
                                <p class="text-dark mb-0">Powered by <a href="#" class="text-primary ms-1">SanoaMedia</a></p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}