{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}{% trans 'Password change' %}{% endblock %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
<li class="breadcrumb-item active">{% trans 'Password change' %}</li>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-xl-6 col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-bottom">
                <h4 class="card-title mb-0 fw-semibold">
                    <i class="ri-lock-password-line me-2"></i>
                    {% trans 'Password Change' %}
                </h4>
            </div>
            
            <div class="card-body p-4">
                {% if form.errors %}
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="ri-error-warning-line me-1"></i>
                        <strong>{% trans "Please correct the errors below." %}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endif %}

                <p class="text-muted mb-4">
                    {% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}
                </p>

                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="id_old_password">
                            <i class="ri-lock-line me-1"></i>
                            {{ form.old_password.label }}
                        </label>
                        <input type="password" 
                               name="old_password" 
                               autocomplete="current-password"
                               class="form-control {% if form.old_password.errors %}is-invalid{% endif %}"
                               required 
                               id="id_old_password"
                               placeholder="{% trans 'Enter your current password' %}">
                        {% if form.old_password.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.old_password.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="id_new_password1">
                            <i class="ri-lock-password-line me-1"></i>
                            {{ form.new_password1.label }}
                        </label>
                        <input type="password" 
                               name="new_password1" 
                               autocomplete="new-password"
                               class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}"
                               required 
                               id="id_new_password1"
                               placeholder="{% trans 'Enter new password' %}">
                        {% if form.new_password1.help_text %}
                            <div class="form-text">{{ form.new_password1.help_text|safe }}</div>
                        {% endif %}
                        {% if form.new_password1.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.new_password1.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold" for="id_new_password2">
                            <i class="ri-lock-password-line me-1"></i>
                            {{ form.new_password2.label }}
                        </label>
                        <input type="password" 
                               name="new_password2" 
                               autocomplete="new-password"
                               class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}"
                               required 
                               id="id_new_password2"
                               placeholder="{% trans 'Confirm new password' %}">
                        {% if form.new_password2.help_text %}
                            <div class="form-text">{{ form.new_password2.help_text|safe }}</div>
                        {% endif %}
                        {% if form.new_password2.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.new_password2.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{% url 'admin:index' %}" class="btn btn-light">
                            <i class="ri-arrow-left-line me-1"></i>
                            {% trans 'Cancel' %}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line me-1"></i>
                            {% trans 'Change password' %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}