{% extends "layouts/main.html" %}
{% block title %}Change password — {% if brand is defined %}{{ brand.app_name }}{% else %}pyvelm{% endif %}{% endblock %}
{% block page_title %}Change 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">
        {% 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/account/password" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-heading mb-1.5" for="current">Current password</label>
                <input id="current" name="current_password" type="password" required autofocus
                       autocomplete="current-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>
                <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"
                       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/account/profile" class="text-xs text-body-subtle hover:text-fg-brand">Back to profile</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">
                    Update password
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}