{% extends "base.html" %}
{% load static %}
{% block title %}
    Change Password
{% endblock title %}
{% block description %}
    Secure your account by changing your password. Enter your current password and set a new, strong password to protect your information.
{% endblock description %}
{% block keywords %}
    Change Password, Secure Account, Update Password, Strong Password, Protect Information
{% endblock keywords %}
{% block og_title %}
    Change Password - Secure Your Account
{% endblock og_title %}
{% block og_description %}
    Change your password 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 %}
    {% include "includes/sidenav.html" %}
    <div class="min-h-screen flex justify-center items-start bg-white overflow-hidden pt-14">
        <div class="bg-gray-50 p-8 rounded-lg shadow-xl w-full sm:w-96 md:w-1/2 lg:w-1/3 max-w-4xl">
            <h1 class="text-center font-bold text-xl mb-6">{% trans "Change Password" %}</h1>
            <form method="post"
                  action="{% url 'account_change_password' %}"
                  class="password_change"
                  id="password-change-form">
                {% csrf_token %}
                <div class="space-y-4">
                    <!-- Old Password -->
                    <div class="relative {% if form.password1.errors %}has-error{% endif %}">
                        <input class="w-full py-2 pl-5 pr-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                               type="password"
                               id="id_oldpassword"
                               name="oldpassword"
                               placeholder="Old Password"
                               value="{{ form.oldpassword.value|default:'' }}">
                        <span class="text-red-500 text-sm">{{ form.oldpassword.errors }}</span>
                    </div>
                    <!-- New Password -->
                    <div class="relative {% if form.password1.errors %}has-error{% endif %}">
                        <input class="w-full py-2 pl-5 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="New Password"
                               value="{{ form.password1.value|default:'' }}">
                        <span class="text-red-500 text-sm">{{ form.password1.errors }}</span>
                    </div>
                    <!-- Confirm Password -->
                    <div class="relative {% if form.password2.errors %}has-error{% endif %}">
                        <input class="w-full py-2 pl-5 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"
                               value="{{ form.password2.value|default:'' }}">
                        <span class="text-red-500 text-sm">{{ form.password2.errors }}</span>
                    </div>
                    <!-- Show Password Checkbox -->
                    <div class="flex items-center space-x-2 space-y-2">
                        <input type="checkbox"
                               class="form-checkbox text-blue-500"
                               id="show-password">
                        <label for="show-password" class="text-lg">{% trans "Show Password" %}</label>
                    </div>
                    <div class="mt-4">
                        <button type="submit"
                                class="w-full py-2 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-600">
                            {% trans "Change Password" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
    // Toggle show password functionality
    const showPasswordCheckbox = document.getElementById('show-password');
    const passwordFields = document.querySelectorAll('#id_oldpassword, #id_password1, #id_password2');

    showPasswordCheckbox.addEventListener('change', function() {
        passwordFields.forEach(function(field) {
            if (showPasswordCheckbox.checked) {
                field.type = 'text'; 
            } else {
                field.type = 'password'; 
            }
        });
    });

    </script>
{% endblock content %}