{% extends 'core/base.html' %}

{% block title %}Initial Setup | Killian{% endblock %}

{% block content %}
<div class="first-run-setup-stack">
    <div class="first-run-progress" aria-label="Initial setup progress">
        <span class="{% if setup_step == 'administrator' %}active{% else %}complete{% endif %}">1. Administrator</span>
        <span class="{% if setup_step == 'mfa' %}active{% endif %}">2. Two-Factor Authentication</span>
    </div>

    {% if setup_step == 'administrator' %}
    <section class="auth-card wide first-run-card">
        <div class="first-run-kicker">First Run</div>
        <h1>Create the Initial Administrator</h1>
        <p>
            This account receives Killian administrator and recovery-level access.
            Create it before exposing the installation to other users.
        </p>

        <div class="info-notice">
            <strong>One-time setup</strong>
            <span>
                After setup is completed, this page is no longer available. Additional
                accounts are created from Administration inside Killian.
            </span>
        </div>

        <form method="post" autocomplete="off">
            {% csrf_token %}
            <input type="hidden" name="action" value="create_administrator">

            {{ form.non_field_errors }}

            <label for="{{ form.username.id_for_label }}">Username</label>
            {{ form.username }}
            {{ form.username.errors }}

            <label for="{{ form.email.id_for_label }}">Email address</label>
            {{ form.email }}
            {{ form.email.errors }}

            <label for="{{ form.password1.id_for_label }}">Password</label>
            {{ form.password1 }}
            {{ form.password1.errors }}
            {% if form.password1.help_text %}
                <div class="form-help">{{ form.password1.help_text|safe }}</div>
            {% endif %}

            <label for="{{ form.password2.id_for_label }}">Confirm password</label>
            {{ form.password2 }}
            {{ form.password2.errors }}

            <button type="submit">Create Administrator and Continue</button>
        </form>
    </section>

    {% elif setup_step == 'mfa' %}
    <section class="auth-card wide first-run-card">
        <div class="first-run-kicker">Security Setup</div>
        <h1>Protect Killian with Two-Factor Authentication</h1>
        <p>
            Two-factor authentication is strongly recommended for a system that may
            contain credentials and infrastructure documentation.
        </p>

        <div class="first-run-recommended">
            <strong>Recommended: Enable 2FA</strong>
            <span>
                Scan the QR code, enter the current 6-digit code, and Killian will enable
                the default globally enforced 2FA policy.
            </span>
        </div>

        <img
            class="qr"
            src="data:image/png;base64,{{ qr_data }}"
            alt="Authenticator enrollment QR code"
        >

        <p>
            <strong>Manual key:</strong>
            <code class="first-run-manual-key">{{ secret }}</code>
        </p>

        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="enable_mfa">

            <label for="first-run-mfa-code">Enter the current 6-digit authenticator code</label>
            <input
                id="first-run-mfa-code"
                name="code"
                inputmode="numeric"
                autocomplete="one-time-code"
                maxlength="6"
                required
                autofocus
            >

            <button type="submit">Enable 2FA and Finish Setup</button>
        </form>

        <div class="first-run-or"><span>or</span></div>

        <button
            type="button"
            class="button danger first-run-disable-open"
            id="first-run-disable-open"
        >
            Continue Without 2FA
        </button>
        <p class="first-run-danger-caption">NOT RECOMMENDED</p>
    </section>

    <dialog class="first-run-danger-dialog" id="first-run-danger-dialog">
        <div class="first-run-danger-dialog-body">
            <div class="first-run-danger-mark" aria-hidden="true">!</div>
            <h2>Disable Two-Factor Authentication?</h2>

            <div class="danger-notice">
                <strong>NOT RECOMMENDED</strong>
                <span>
                    Continuing will disable Killian's global 2FA enforcement and global
                    credential-reveal 2FA requirement. Accounts will be able to sign in
                    without an authenticator until an administrator enables 2FA from
                    Administration.
                </span>
            </div>

            <p>
                Passwords alone provide less protection for sensitive MSP documentation.
                Enable 2FA unless you have a specific reason not to use it.
            </p>

            <div class="first-run-danger-actions">
                <button type="button" class="button secondary" id="first-run-disable-cancel">
                    Keep 2FA Enabled
                </button>

                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="disable_mfa">
                    <input type="hidden" name="confirm_disable" value="yes">
                    <button type="submit" class="danger">
                        Disable 2FA and Finish Setup
                    </button>
                </form>
            </div>
        </div>
    </dialog>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
{% if setup_step == 'mfa' %}<script src="/static/js/first-run-setup.js"></script>{% endif %}
{% endblock %}