{{ define "content" }}
<div class="mx-auto w-full max-w-md space-y-6">
    <div class="flex flex-col items-center text-center">
        <div class="bg-primary/10 text-primary mb-3 flex size-12 items-center justify-center rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
        </div>
        <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "auth.totp" }}</h1>
    </div>

    {{ if .recoveryCodes }}
    <div class="bg-card space-y-4 rounded-lg border p-6 shadow-sm">
        <p class="text-muted-foreground text-sm">{{ .locale.Tr "auth.totp.save-recovery-codes" }}</p>
        <ul class="bg-muted grid grid-cols-2 gap-x-6 gap-y-1 rounded-md border p-4 font-mono text-sm">
            {{ range .recoveryCodes }}
            <li class="select-all">{{ . }}</li>
            {{ end }}
        </ul>
        <a href="{{ .c.ExternalUrl }}/-/settings/authentication" class="btn w-full">{{ .locale.Tr "auth.totp.proceed" }}</a>
    </div>

    {{ else }}
    <div class="bg-card space-y-5 rounded-lg border p-6 shadow-sm">
        <p class="text-muted-foreground text-sm">{{ .locale.Tr "auth.totp.scan-qr-code" }}</p>

        <div class="flex flex-col items-center gap-3">
            <img src="{{ .totpQrcode }}" alt="TOTP QR code" class="rounded-md border bg-white p-2" />
            <code class="bg-muted select-all break-all rounded px-2 py-1 text-center text-xs">{{ .totpSecret }}</code>
        </div>

        <div class="border-border border-t" aria-hidden="true"></div>

        <form method="post" action="{{ .c.ExternalUrl }}/-/settings/totp/generate" class="space-y-4">
            {{ .csrfHtml }}
            <div class="space-y-1.5">
                <label for="code" class="text-sm font-medium">{{ .locale.Tr "auth.totp.code" }}</label>
                <input id="code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" required autofocus class="input w-full text-center tracking-widest" />
            </div>
            <button type="submit" class="btn w-full">{{ .locale.Tr "auth.totp.submit" }}</button>
        </form>
    </div>
    {{ end }}
</div>
{{ end }}