{{ template "header" .}}

<div class="py-10">
    <header class="pb-4">
        <div>
            <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "auth.mfa" }}</h1>
        </div>
    </header>
    <main>
        <div class="mt-8 sm:w-full sm:max-w-md mx-auto grid gap-y-4">
            {{ if .hasWebauthn }}
            <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10 ">
                <div class="flex items-center justify-center">
                    <p class="block text-md font-medium items-center text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.mfa.use-passkey-to-finish" }}</p>
                </div>
                <div class="flex items-center justify-center mt-4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-14">
                        <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>
                <div class="flex items-center justify-center mt-4">
                    <form id="webauthn">
                        {{ .csrfHtml }}
                        <button type="button" id="login-passkey-button" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "auth.mfa.use-passkey" }}</button>
                    </form>
                </div>
                <div class="flex items-center justify-center">
                    <p id="login-passkey-wait" class="hidden text-sm font-medium items-center text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.mfa.waiting-for-passkey-input" }}</p>
                </div>
            </div>
            {{ end }}

            {{ if .hasTotp }}
            <div class="bg-white dark:bg-gray-900 rounded-md border border-1 border-gray-200 dark:border-gray-700 py-8 px-4 shadow sm:rounded-lg sm:px-10 ">
                <div class="flex items-center justify-center">
                    <p class="block text-md font-medium items-center text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.totp.enter-code" }}</p>
                </div>
                <div class="flex items-center justify-center">
                    <p class="block text-sm font-medium items-center text-slate-600 dark:text-slate-400">{{ .locale.Tr "auth.totp.enter-recovery-key" }}</p>
                </div>
                <div class="flex items-center justify-center mt-4">
                    <form method="post" action="{{ $.c.ExternalUrl }}/mfa/totp/assertion">
                        {{ .csrfHtml }}
                        <label for="code" class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ .locale.Tr "auth.totp.code" }}</label>
                        <div class="mt-1">
                            <input id="code" name="code" type="text" required autocomplete="off" class="dark:bg-gray-800 appearance-none block w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                        </div>
                        <button type="submit" class="mt-2 inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "auth.totp.submit" }}</button>
                    </form>
                </div>
            </div>
            {{ end }}
        </div>
    </main>
</div>

<script type="module" src="{{ asset "webauthn.ts" }}"></script>


{{ template "footer" .}}