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

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

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
<li class="breadcrumb-item active">{% trans 'Password change successful' %}</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-body p-5 text-center">
                <div class="success-icon mb-4">
                    <i class="ri-check-line"></i>
                </div>

                <h2 class="fw-bold fs-18 text-uppercase mb-2 text-success">
                    {% trans 'Password Change Successful' %}
                </h2>
                <p class="text-muted mb-4">
                    {% trans 'Your password was changed successfully.' %}
                </p>

                <a href="{% url 'admin:index' %}" class="btn btn-success px-4 py-2">
                    <i class="ri-dashboard-line me-1"></i>
                    {% trans 'Go to Dashboard' %}
                </a>
            </div>
        </div>
    </div>
</div>

<style>
.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.success-icon i {
    font-size: 40px;
    color: white;
}

[data-bs-theme="dark"] .success-icon {
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3);
}
</style>
{% endblock %}