{% extends "login/base.html" %}
{% block content %}
<div class="authenticator-setup-compact">
<style>
    /* Compact setup form without changing the shared authentication header. */
    .auth-card:has(.authenticator-setup-compact) {
        width: min(420px, calc(100vw - 28px));
        max-width: 420px;
        padding: 18px 22px 16px;
        margin: 0 auto;
    }

    .authenticator-setup-compact .auth-icon {
        width: 54px;
        height: 54px;
        margin: 0 auto 8px;
    }

    .authenticator-setup-compact .auth-icon svg {
        width: 52px;
        height: 52px;
    }

    .authenticator-setup-compact .auth-title {
        font-size: 1.3rem;
        line-height: 1.25;
        margin: 0 0 6px;
    }

    .authenticator-setup-compact .auth-subtitle {
        font-size: .86rem;
        line-height: 1.35;
        margin: 0 auto 10px;
    }

    .authenticator-setup-compact .setup-qr {
        display: block;
        width: 148px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 6px;
    }

    .authenticator-setup-compact details {
        margin: 0 0 8px !important;
        font-size: .86rem;
    }

    .authenticator-setup-compact details p {
        margin-top: 5px !important;
    }

    .authenticator-setup-compact .form-label {
        margin-bottom: 4px;
        font-size: .88rem;
    }

    .authenticator-setup-compact .otp-input {
        height: 44px;
        min-height: 44px;
        padding: 6px 10px;
        font-size: 17px;
    }

    .authenticator-setup-compact .btn-verify {
        height: 44px;
        min-height: 44px;
        margin-top: 8px;
        font-size: 15px;
    }

    .authenticator-setup-compact .setup-note {
        margin-top: 8px !important;
        font-size: .78rem;
        line-height: 1.3;
    }

    .authenticator-setup-compact .alert {
        margin-top: 10px !important;
        padding: 8px 12px;
        font-size: .85rem;
    }

    /* Keep the header visible; only remove desktop overflow when the layout fits. */
    @media (min-width: 768px) {
        .auth-main {
            min-height: calc(100vh - 104px);
            padding: 10px 20px;
        }
    }

    @media (max-width: 767.98px) {
        .auth-card:has(.authenticator-setup-compact) {
            width: min(420px, calc(100vw - 24px));
            padding: 18px 16px 16px;
            margin: 10px auto;
        }

        .auth-main {
            padding: 14px 10px;
        }
    }
</style>
    <div class="auth-icon" aria-hidden="true">
        <svg viewBox="0 0 64 64" width="76" height="76" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32 4L54 13V29C54 43 45 54 32 60C19 54 10 43 10 29V13L32 4Z"
                  stroke="currentColor" stroke-width="3.2" stroke-linejoin="round"/>
            <rect x="22" y="28" width="20" height="17" rx="3" stroke="currentColor" stroke-width="3"/>
            <path d="M26 28V22C26 18.7 28.7 16 32 16C35.3 16 38 18.7 38 22V28"
                  stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
        </svg>
    </div>
    <h1 class="auth-title">Set Up Google Authenticator</h1>
    <p class="auth-subtitle">Scan this QR code with Google Authenticator, then enter the 6-digit code below.</p>

    <div class="text-center">
        <img src="data:image/png;base64,{{ qr_code }}" alt="Google Authenticator QR Code" class="setup-qr">
    </div>

    <details class="mb-3">
        <summary>Can't scan the QR code?</summary>
        <p class="mt-2 mb-1 small">Enter this setup key manually:</p>
        <code class="user-select-all">{{ secret_key }}</code>
    </details>

    <form method="post">
        {% csrf_token %}
        <div class="mb-1">
            <label for="otp" class="form-label">6-digit verification code</label>
            <input type="text" class="form-control otp-input" id="otp" name="otp"
                   placeholder="Enter 6-digit code" inputmode="numeric"
                   autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6"
                   required autofocus>
        </div>
        <button type="submit" class="btn btn-verify w-100">Verify and Enable</button>
    </form>

    <p class="small text-muted text-center setup-note mb-0">
        Authenticator will only be enabled after the code is verified.
    </p>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-warning alert-dismissible fade show mt-4 mb-0" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
</div>
{% endblock %}