{% extends "config/chromeless_base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}Choose a new password - Pychestrate{% endblock %}

{% block extra_css %}
<style>
    .password-container {
        max-width: 440px;
        margin: 80px auto;
        padding: 36px 40px;
        background: var(--pyc-color-surface);
        border-radius: 8px;
        box-shadow: var(--pyc-shadow-elevated, 0 4px 20px rgba(0, 0, 0, 0.1));
    }
    .password-container h1 {
        margin: 0 0 8px;
        font-size: 1.4rem;
    }
    .password-container .lede {
        margin: 0 0 20px;
        color: var(--pyc-color-on-surface-muted);
    }
    .password-container .btn-block {
        width: 100%;
    }
</style>
{% endblock %}

{% block content %}
<div class="password-container">
    <h1>Choose a new password</h1>
    <p class="lede">An administrator set a temporary password for <strong>{{ login_name }}</strong>. Choose your own password to finish signing in.</p>

    {{ ui.error_summary(errors, error_labels) }}
    {% if problems %}
    <div class="alert alert-error" role="alert">{{ problems | join(" ") }}</div>
    {% endif %}

    <form method="post" action="{{ url_for('config.password_change_required') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="text" name="username" value="{{ login_name }}" autocomplete="username" hidden>
        <div class="form-group">
            <label for="current_password">Temporary password</label>
            <input type="password" id="current_password" name="current_password" class="form-control" required autofocus
                   autocomplete="current-password"{{ ui.invalid_attrs(errors, "current_password") }}>
            {{ ui.field_error(errors, "current_password") }}
        </div>
        <div class="form-group">
            <label for="password">New password</label>
            <input type="password" id="password" name="password" class="form-control" required
                   minlength="{{ password_min_length }}" maxlength="{{ password_max_length }}"
                   pattern="{{ password_pattern }}" title="{{ password_title }}"
                   autocomplete="new-password"{{ ui.invalid_attrs(errors, "password", "password-rules") }}>
            {{ ui.field_error(errors, "password") }}
            {% with password_input_id="password" %}
                {% include "config/_password_rules.html" %}
            {% endwith %}
        </div>
        <div class="form-group">
            <label for="password_confirm">Confirm new password</label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-control" required
                   minlength="{{ password_min_length }}" maxlength="{{ password_max_length }}" autocomplete="new-password"{{ ui.invalid_attrs(errors, "password_confirm") }}>
            {{ ui.field_error(errors, "password_confirm") }}
        </div>
        <button type="submit" class="btn btn-primary btn-block">Change password and sign in</button>
    </form>
</div>
{% endblock %}