{% extends "base.html" %}

{% block title %}Set Up Your Account - {{ config.INSTANCE_NAME }}{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <h2>Set Up Your Account</h2>
        <p class="login-description">
            Create a password to complete your account setup.
        </p>

        <div class="account-email">
            <strong>{{ email }}</strong>
        </div>

        {% if error %}
        <div class="flash flash-error">{{ error }}</div>
        {% endif %}

        <form method="POST" action="/auth/password/setup/confirm" class="login-form">
            <input type="hidden" name="email" value="{{ email }}">
            <input type="hidden" name="token" value="{{ token }}">

            <div class="form-group">
                <label for="name">Your Name (optional)</label>
                <input type="text"
                       id="name"
                       name="name"
                       value="{{ name|default('', true) }}"
                       placeholder="John Doe"
                       autocomplete="name">
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password"
                       id="password"
                       name="password"
                       placeholder="Create a strong password"
                       required
                       autocomplete="new-password"
                       minlength="8">
                <small class="form-hint">At least 8 characters.</small>
            </div>

            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password"
                       id="confirm_password"
                       name="confirm_password"
                       placeholder="Re-enter your password"
                       required
                       autocomplete="new-password"
                       minlength="8">
            </div>

            <button type="submit" class="btn btn-primary btn-block">Set Password</button>
        </form>

        <div class="login-links">
            <a href="/login/password" class="btn btn-link">Back to Login</a>
        </div>
    </div>
</div>
{% endblock %}