{% extends "base.html" %}
{% load static %}
{% block title %}
    Change Password Using Key
{% endblock title %}
{% block description %}
    Secure your account by changing your password using a key. Enter your current password and set a new, strong password to protect your information.
{% endblock description %}
{% block keywords %}
    Change Password, Using Key, Secure Account, Update Password, Strong Password, Protect Information
{% endblock keywords %}
{% block og_title %}
    Change Password Using Key - Secure Your Account
{% endblock og_title %}
{% block og_description %}
    Change your password using a key to secure your account. Enter your current password and set a new, strong password to ensure your information is protected.
{% endblock og_description %}
{% load i18n %}
{% block content %}
    <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        <h1 class="text-center text-2xl font-bold mb-6">
            {% if token_fail %}
                {% trans "Bad Token" %}
            {% else %}
                {% trans "Change Password" %}
            {% endif %}
        </h1>
        <div class="w-full max-w-md bg-white p-8 rounded-lg shadow-md">
            {% if token_fail %}
                {% url 'account_reset_password' as passwd_reset_url %}
                <p class="text-center text-gray-700">
                    The password reset link was invalid, possibly because it has already been used.
                    <a href="{{ passwd_reset_url }}" class="text-blue-500 hover:underline">Try again</a>.
                </p>
            {% else %}
                {% if form %}
                    <form method="post" action="{{ action_url }}" class="space-y-6">
                        {% csrf_token %}
                        <!-- Password Field -->
                        <div class="relative">
                            <input class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   type="password"
                                   id="id_password1"
                                   name="password1"
                                   placeholder="Password">
                            {% if form.password1.errors %}<span class="text-red-500 text-sm">{{ form.password1.errors }}</span>{% endif %}
                        </div>
                        <!-- Confirm Password Field -->
                        <div class="relative">
                            <input class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   type="password"
                                   id="id_password2"
                                   name="password2"
                                   placeholder="Confirm Password">
                            {% if form.password2.errors %}<span class="text-red-500 text-sm">{{ form.password2.errors }}</span>{% endif %}
                        </div>
                        <!-- Submit Button -->
                        <div class="flex justify-end">
                            <button type="submit"
                                    class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                {% trans "Change Password" %}
                            </button>
                        </div>
                    </form>
                {% else %}
                    <p class="text-center text-gray-700">{% trans "Your password is now changed!" %}</p>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock content %}