{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
        }

        .messages {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }

        .messages li {
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        form p {
            margin-bottom: 10px;
        }

        input[type="password"] {
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
{% endblock %}
{% block title %}
    {% trans 'Reset Your Password' %}
{% endblock %}
{% block description %}
    {% trans 'Reset Your Password' %}
{% endblock %}
{% block body %}
    <div class="container">
    <h2>{% trans 'Reset Your Password' %}</h2>
    <!-- Display messages -->
    {% if messages %}
        <ul class="messages">
            {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    <!-- Password Reset Form -->
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}  <!-- Renders the form fields -->
        <button type="submit">{% trans 'Reset Password' %}</button>
    </form>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}