{% extends "adminsite/base.html" %}
{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_password_input.html" as passwords %}

{% block page_title %}{{ _('Change password') }} · {{ title }}{% endblock %}

{% block header_class %}border-b border-base-300 lg:py-5{% endblock %}

{% block header %}<h1 class="text-[22px] font-semibold leading-tight tracking-tight">{{ _('Change password') }}</h1>{% endblock %}

{% block content %}
{#- Three boxes, never filled in again after a mistake. The cursor starts in
    the one that needs another look. -#}
{%- set boxes = [
  ("current", _('Current password'), "current-password"),
  ("new", _('New password'), "new-password"),
  ("repeat", _('Repeat the new password'), "new-password"),
] -%}
{%- set focus = (errors|list|first) if errors else "current" -%}
<div class="flex-1 bg-base-200 px-4 py-6 lg:px-7">
  <form class="flex max-w-md flex-col gap-5" method="post" action="{{ urls.password() }}">
    {{ csrf_input | safe if csrf_input }}
    <section class="flex flex-col gap-4 rounded-box border border-base-300 bg-base-100 p-5 shadow-quiet">
      {% for name, label, filling in boxes %}
        <div class="flex flex-col gap-1.5">
          <label class="text-label font-medium" for="password-{{ name }}">{{ label }}</label>
          {% call passwords.box("password-" ~ name, wrong=errors.get(name)) %}
            <input class="grow" id="password-{{ name }}" name="{{ name }}" type="password" autocomplete="{{ filling }}" required
                   {% if errors.get(name) %}aria-invalid="true" aria-describedby="password-{{ name }}-note"{% endif %}
                   {% if name == focus %}autofocus{% endif %}>
          {% endcall %}
          {% if errors.get(name) %}
            <p class="flex items-start gap-1.5 text-note leading-snug text-error" id="password-{{ name }}-note">
              <span class="mt-px">{{ icons.icon("alert", 14) }}</span>{{ errors[name] }}
            </p>
          {% endif %}
        </div>
      {% endfor %}
    </section>
    <div class="flex items-center gap-2">
      <button class="btn btn-primary" type="submit">{{ _('Change password') }}</button>
      <a class="btn btn-ghost" href="{{ urls.index() }}">{{ _('Cancel') }}</a>
    </div>
  </form>
</div>
{% endblock %}