{% extends "layouts/base.html" %}

{% block title %}Admin Setup - Sneaky Klaus{% endblock %}

{% block content %}
<article style="max-width: 600px; margin: 4rem auto;">
    <header>
        <h1>Admin Setup</h1>
        <p>Create your administrator account to get started with Sneaky Klaus.</p>
    </header>

    <form method="POST" action="{{ url_for('setup.setup') }}">
        {{ form.hidden_tag() }}

        <div>
            <label for="email">
                {{ form.email.label.text }}
                {{ form.email(required=True) }}
            </label>
            {% if form.email.errors %}
                <small style="color: var(--pico-form-element-invalid-border-color);">
                    {{ form.email.errors[0] }}
                </small>
            {% endif %}
        </div>

        <div>
            <label for="password">
                {{ form.password.label.text }}
                {{ form.password(required=True) }}
            </label>
            {% if form.password.errors %}
                <small style="color: var(--pico-form-element-invalid-border-color);">
                    {{ form.password.errors[0] }}
                </small>
            {% endif %}
        </div>

        <div>
            <label for="password_confirm">
                {{ form.password_confirm.label.text }}
                {{ form.password_confirm(required=True) }}
            </label>
            {% if form.password_confirm.errors %}
                <small style="color: var(--pico-form-element-invalid-border-color);">
                    {{ form.password_confirm.errors[0] }}
                </small>
            {% endif %}
        </div>

        <button type="submit">Create Admin Account</button>
    </form>
</article>
{% endblock %}