{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/auth.css">
{% endblock %}
{% block content %}
<div class="auth-page">
    <div class="auth-card">
        <a href="/auth/login" class="auth-back">&larr; Back to Login</a>
        <h2>Set New Password</h2>
        <p class="subtitle">Choose a new password for your account</p>

        {% if errors %}
        <div class="auth-error">
            <ul>
                {% for error in errors %}
                <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form class="auth-form" method="POST" action="/auth/reset-password/{{ token }}">
            <div class="auth-field">
                <label for="password">New Password</label>
                <div class="input-wrap">
                    <input type="password" id="password" name="password" required maxlength="128" placeholder="At least 6 characters">
                    <button type="button" class="auth-toggle-pw" aria-label="Toggle password visibility">&#x1F441;</button>
                </div>
            </div>
            <div class="auth-field">
                <label for="confirm_password">Confirm Password</label>
                <div class="input-wrap">
                    <input type="password" id="confirm_password" name="confirm_password" required maxlength="128" placeholder="Repeat your password">
                    <button type="button" class="auth-toggle-pw" aria-label="Toggle password visibility">&#x1F441;</button>
                </div>
            </div>
            <button type="submit" class="auth-submit"><span class="icon">&#x1F512;</span>Reset Password</button>
        </form>
    </div>
</div>
{% endblock %}