{*
SPDX-FileCopyrightText: © 2025 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{ import "/_libs/forms" }}

{{ block title() }}{{ gettext("Setup Verification Code") }}{{ end }}

{{ block mainContent() }}
<h1 class="title text-h2">{{ yield title() }}</h1>

<form action="{{ urlFor() }}" method="post">
  <input type="hidden" name="secret" value="{{ .Form.Get(`secret`).String() }}">
  {{- if isset(.Code) -}}
    <h2 class="title text-h3">{{ gettext("Scan this QR code with your app") }}</h2>
    <p class="my-4">{{ gettext("Scan the QR code below with a two-factor authentication app on your phone.") }}</p>

    <img class="border border-primary-dark rounded bg-white p-4"
     src="{{ qrcode(.Code.URL().String(), -6, `#1e485b`) }}"
     alt="" width="304" height="304"
     data-totp-uri="{{ .Code.URL().String() }}">

    <p class="mt-4">{{ gettext("If you can't use the QR code, enter the code below instead.") }}</p>
    <p><strong>{{ .Code.Secret }}</strong></p>
  {{- end -}}

  <p class="mt-8 font-semibold">{{ gettext("Enter the code from your application.") }}</p>
  <p class="mb-4">{{ gettext("After scanning the QR code, the app will display a six-digit code that you need to enter below.") }}</p>

  {{ yield textField(
    field=.Form.Get("otp"),
    required=true,
    label=gettext("Code from your device"),
    inputClass="form-input",
    inputAttrs=attrList("autocomplete", "one-time-code"),
  ) }}

  <p class="btn-block">
    <button class="btn btn-primary" type="submit">{{ gettext("Finish") }}</button>
  </p>

</form>
{{ end }}