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

{% load static %}

{% block title %} Confirm Password Reset - 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;
    }
</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">
                                <img alt="Adtlas Project Logo" class="logo-default" src="{% static 'images/brands/logo_black.png' %}" width="171">
                                <h4 style="margin-top: 15px;">Set New Password</h4>
                                <p style="color: #666; font-size: 14px; margin-top: 10px;">
                                    Please enter your new password below.
                                </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 %}
                                
                                {% if messages %}
                                    {% for message in messages %}
                                        <div class="alert alert-{{ message.tags }}">
                                            {{ message }}
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                            
                            <!-- New Password Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.new_password1 }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-lock" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.new_password1.errors %}
                                    <div class="field-errors">
                                        {% for error in form.new_password1.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Confirm Password Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.new_password2 }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-lock" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.new_password2.errors %}
                                    <div class="field-errors">
                                        {% for error in form.new_password2.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">
                                    Reset Password
                                </button>
                            </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 %}