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

{% block title %}{{ title }}{% endblock %}

{% block breadcrumbs %}
    <div class="text-sm breadcrumbs">
        <ul>
            <li><a href="{% url 'admin:index' %}" class="link link-hover">{% trans 'Dashboard' %}</a></li>
            <li>{% trans "Password change" %}</li>
        </ul>
    </div>
{% endblock %}

{% block content %}
    <section class="hero-glow p-6 md:p-8 mb-5">
        <div class="relative z-10 flex flex-col gap-2">
            <p class="text-xs font-medium uppercase tracking-[0.2em] text-base-content/40">
                <i class="fa-solid fa-circle text-[5px] text-success align-middle me-1.5"></i>
                {% trans "Security" %}
            </p>
            <h1 class="text-3xl font-bold tracking-tight md:text-4xl">{{ title }}</h1>
        </div>
    </section>

    <div class="glass-panel-strong rounded-2xl overflow-hidden max-w-lg">
        <div class="p-6 md:p-8">
            <div class="flex items-start gap-3 mb-6">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-success/10 text-success">
                    <i class="fa-solid fa-circle-check"></i>
                </div>
                <div>
                    <p class="text-sm text-base-content/70">
                        {% translate 'Your password was changed.' %}
                    </p>
                </div>
            </div>

            <a href="{% url 'admin:index' %}" class="btn btn-primary btn-sm gap-2">
                <i class="fa-solid fa-arrow-left"></i>
                {% trans "Back to dashboard" %}
            </a>
        </div>
    </div>
{% endblock %}