{# _auth_main_mfa_setup.html — MFA setup form column.
   Renders <main class="wf-auth-form"> standalone for HTMX fragment responses.

   Expected context:
     csrf_token, totp_uri, qr_data_uri, secret, error, app_name, is_production
#}
{% import "_partials/_auth_macros.html" as auth %}
<main class="wf-auth-form">
  <div class="wf-auth-top">
    {{ auth.kicker(app_name, "Enable 2FA") }}
  </div>

  <div class="wf-auth-wrap">
    <h1>Enable 2FA</h1>
    <p class="wf-auth-sub">Scan the QR or enter the secret, then verify.</p>

    <div class="wf-framed wf-f wf-col wf-ai-c wf-gap-3 wf-mt-5">
      {% if qr_data_uri %}
        <img src="{{ qr_data_uri|safe }}" alt="QR Code" width="200" height="200"
             style="image-rendering:pixelated;background:#fff;padding:8px">
      {% endif %}
      <div data-testid="totp-uri" class="wf-t-xs wf-fg-muted" style="display:none">{{ totp_uri }}</div>
      <div class="wf-t-xs wf-fg-muted">
        Manual entry:
        <code data-testid="totp-secret" class="wf-kbd">{{ secret }}</code>
      </div>
    </div>

    {% if error %}
      {% set flash = { "kind": "err", "message": error } %}
      <div class="wf-mt-4">{% include "_partials/_flash.html" %}</div>
    {% endif %}

    <form method="post" action="/settings/mfa/confirm" class="wf-f wf-col wf-gap-5 wf-mt-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      <div class="wf-field">
        <label class="wf-label" for="code">Enter the 6-digit code</label>
        <input class="wf-input" type="text" id="code" name="code"
               required autocomplete="one-time-code" inputmode="numeric"
               maxlength="6" pattern="[0-9]{6}">
      </div>

      <button type="submit" class="wf-btn primary lg wf-w-full">Verify and enable →</button>
    </form>

    <p class="wf-caption wf-mt-4">
      <a href="/settings">Back to settings</a>
    </p>
  </div>
</main>