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

{% block title %}{% if link_valid and purpose == 'INVITE' %}Set up your account{% else %}Choose a new password{% endif %} - 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">
    {% if not link_valid %}
    <h1>This link does not work</h1>
    <p class="lede">{{ invalid_message }}</p>
    <a href="{{ url_for('config.login') }}" class="btn btn-secondary">Go to sign in</a>
    {% else %}
    {% if purpose == 'INVITE' %}
    <h1>Set up your account</h1>
    <p class="lede">Choose a password for <strong>{{ login_name }}</strong>. You will sign in with it next.</p>
    {% else %}
    <h1>Choose a new password</h1>
    <p class="lede">Set a new password for <strong>{{ login_name }}</strong>. Your other sessions will be signed out.</p>
    {% endif %}

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

    <form method="post" action="{{ form_action }}">
        <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="password">New password</label>
            <input type="password" id="password" name="password" class="form-control" required autofocus
                   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 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">Set password</button>
    </form>
    {% endif %}
</div>
{% endblock %}