{% extends "layouts/main.html" %}
{% block title %}Reset password{% include "layouts/_app_title_suffix.html" %}{% endblock %}
{% block page_title %}Reset password{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
    <div class="bg-neutral-primary border border-default rounded-xl shadow-sm p-6">
        <p class="mb-4 text-sm text-body-subtle">
            Set a new password for
            <span class="font-semibold text-heading">{{ user.name }}</span>
            <span class="text-xs">({{ user.login }})</span>.
        </p>

        {% if error %}
        <p class="mb-4 px-3 py-2 rounded-md bg-danger-soft border border-fg-danger/30 text-fg-danger text-sm">
            {{ error }}
        </p>
        {% endif %}
        {% if success %}
        <p class="mb-4 px-3 py-2 rounded-md bg-success-soft border border-success-strong/30 text-success-strong text-sm">
            Password updated.
        </p>
        {% endif %}

        <form method="post" action="/web/users/{{ user.id }}/reset-password" class="space-y-4">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}">
            <div>
                <label class="block text-sm font-medium text-heading mb-1.5" for="new">New password</label>
                <input id="new" name="new_password" type="password" required minlength="6" autofocus
                       autocomplete="new-password"
                       class="w-full bg-neutral-primary border border-default rounded-md px-3 py-2 text-sm
                              text-heading focus:outline-none focus:ring-2 focus:ring-fg-brand focus:border-fg-brand">
                <p class="mt-1 text-xs text-body-subtle">Minimum 6 characters.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-heading mb-1.5" for="confirm">Confirm new password</label>
                <input id="confirm" name="confirm_password" type="password" required minlength="6"
                       autocomplete="new-password"
                       class="w-full bg-neutral-primary border border-default rounded-md px-3 py-2 text-sm
                              text-heading focus:outline-none focus:ring-2 focus:ring-fg-brand focus:border-fg-brand">
            </div>
            <div class="flex items-center justify-between pt-2">
                <a href="/web/views/admin/user.form/record/{{ user.id }}"
                   class="text-xs text-body-subtle hover:text-fg-brand">
                    Back to user
                </a>
                <button type="submit"
                        class="px-4 py-2 bg-fg-brand text-white text-sm font-medium rounded-md
                               hover:opacity-90 transition-opacity">
                    Set new password
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}