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

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

{% block title %}{{ title }}{% 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-primary align-middle me-1.5"></i>
                {% trans "Security" %}
            </p>
            <h1 class="text-3xl font-bold tracking-tight md:text-4xl">{{ title }}</h1>
        </div>
    </section>

    {% if validlink %}
    <div class="glass-panel-strong rounded-2xl overflow-hidden max-w-lg">
        <div class="p-6 md:p-8">
            <p class="text-sm text-base-content/60 mb-6">
                {% translate "Please enter your new password twice so we can verify you typed it in correctly." %}
            </p>

            <form method="post">{% csrf_token %}
                <fieldset class="space-y-4">
                    <div class="form-control">
                        <label class="label" for="id_new_password1">
                            <span class="label-text text-sm font-medium">{{ form.new_password1.label }}</span>
                        </label>
                        {{ form.new_password1 }}
                        {% if form.new_password1.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.new_password1.errors }}</span>
                            </label>
                        {% endif %}
                        {% if form.new_password1.help_text %}
                            <label class="label">
                                <span class="label-text-alt text-xs text-base-content/50">{{ form.new_password1.help_text|safe }}</span>
                            </label>
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label class="label" for="id_new_password2">
                            <span class="label-text text-sm font-medium">{{ form.new_password2.label }}</span>
                        </label>
                        {{ form.new_password2 }}
                        {% if form.new_password2.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.new_password2.errors }}</span>
                            </label>
                        {% endif %}
                    </div>
                </fieldset>

                <div class="flex justify-end mt-6 pt-5 border-t border-base-content/5">
                    <button type="submit" class="btn btn-primary gap-2">
                        <i class="fa-solid fa-key"></i>
                        {% translate 'Change my password' %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% else %}
    <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">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-error/10 text-error">
                    <i class="fa-solid fa-circle-exclamation"></i>
                </div>
                <div>
                    <p class="text-sm text-base-content/70">
                        {% translate "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}
                    </p>
                </div>
            </div>
            <div class="mt-6 pt-5 border-t border-base-content/5">
                <a href="{% url 'admin:password_reset' %}" class="btn btn-primary btn-sm gap-2">
                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
                    {% trans "Request new reset link" %}
                </a>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}