{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Change Password" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="max-w-lg mx-auto py-6 px-4">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'user_detail' request.user.pk %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
                <i data-lucide="user" class="w-4 h-4"></i> {% trans "Profile" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Change Password" %}</li>
        </ol>
    </nav>

    <!-- Password Change Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
            <h2 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="lock" class="w-5 h-5" style="color: #9d2235;"></i>
                {% trans "Change Password" %}
            </h2>
        </div>
        
        <div class="p-6">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background-color: rgba(157, 34, 53, 0.1);">
                    <i data-lucide="lock" class="w-8 h-8" style="color: #9d2235;"></i>
                </div>
                <p class="text-sm text-gray-600">
                    {% trans "Please enter your current password and a new password to secure your account." %}
                </p>
            </div>

            <form method="post" action="{% url 'account_change_password' %}" class="space-y-6" id="password-change-form">
                {% csrf_token %}

                {% if form.non_field_errors %}
                    <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
                        <div class="flex items-start gap-3">
                            <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
                            <div>
                                <h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
                                {% for error in form.non_field_errors %}
                                    <p class="text-red-700 mb-0">{{ error }}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}

                {% for field in form %}
                    <div>
                        <label for="id_{{ field.name }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ field.label }} <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="lock" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            {{ field }}
                        </div>
                        {% if field.errors %}
                            <p class="mt-1 text-xs text-red-600">{{ field.errors.0 }}</p>
                        {% endif %}
                        {% if field.help_text %}
                            <p class="mt-1 text-xs text-gray-500">{{ field.help_text }}</p>
                        {% endif %}
                    </div>
                {% endfor %}

                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
                    <a href="{% url 'user_detail' request.user.pk %}" 
                       class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" 
                            class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
                            style="background-color: #9d2235;"
                            onmouseover="this.style.backgroundColor='#7a1a29'"
                            onmouseout="this.style.backgroundColor='#9d2235';">
                        <i data-lucide="lock" class="w-5 h-5"></i>
                        {% trans "Change Password" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Add Tailwind classes to password inputs
    document.querySelectorAll('input[type="password"]').forEach(input => {
        input.classList.add('w-full', 'pl-10', 'pr-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
    });

    // Form validation
    const form = document.getElementById('password-change-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const passwordInputs = form.querySelectorAll('input[type="password"]');
            const oldPassword = passwordInputs[0].value;
            const newPassword = passwordInputs[1].value;
            const confirmPassword = passwordInputs[2].value;
            
            if (!oldPassword || !newPassword || !confirmPassword) {
                e.preventDefault();
                alert("{% trans 'Please fill in all password fields.' %}");
                return false;
            }

            if (newPassword !== confirmPassword) {
                e.preventDefault();
                alert("{% trans 'New password and confirmation do not match.' %}");
                return false;
            }

            if (newPassword.length < 8) {
                e.preventDefault();
                alert("{% trans 'Password must be at least 8 characters long.' %}");
                return false;
            }
        });
    }
});
</script>
{% endblock %}