{% extends "base.html" %}
{% from "macros.html" import icon, btn, badge %}
{% block title %}{{ t('Enable 2FA') }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ t('Enable 2-Step Verification') }}</h1>
    <p class="page-subtitle">{{ t('Add an extra layer of security to your account using an authenticator app') }}</p>
  </div>
  <div class="page-actions">
    <a href="{{ admin_prefix }}/me" class="btn btn-default btn-sm" data-spa>
      {{ icon('arrow-left', 14) }} {{ t('Back to profile') }}
    </a>
  </div>
</div>

<div class="dashboard-grid">

  {# Step 1 — QR code #}
  <div class="card" style="overflow:hidden">
    <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
      <span style="background:var(--brand);color:#fff;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800">1</span>
      {{ t('Scan the QR code') }}
    </div>
    <div style="padding:32px">
      <div class="qr-wrap" style="display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap">
        <div style="background:#fff; border:1px solid var(--border); padding:16px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm)">
          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ uri }}"
               alt="{{ t('QR code') }}" style="display:block; width:200px; height:200px">
        </div>
        <div style="flex:1; min-width:240px">
          <p style="font-size:0.875rem; color:var(--fg-2); margin-bottom:24px; line-height:1.6">
            {{ t('Scan this image with an authenticator app like Google Authenticator, Authy, or 1Password to connect your account.') }}
          </p>
          <div class="form-section">{{ t('Unable to scan?') }}</div>
          <p style="font-size:0.8125rem; color:var(--fg-3); margin-bottom:12px">{{ t('You can manually enter this secret key into your app:') }}</p>
          <code style="font-size:0.875rem; word-break:break-all; background:var(--bg); color:var(--brand); padding:12px 16px; border-radius:var(--r); display:block; border:1px solid var(--border); font-weight:700; letter-spacing:0.04em">{{ secret }}</code>
        </div>
      </div>
    </div>
  </div>

  {# Step 2 — Verify #}
  <form method="post" class="card" style="overflow:hidden" data-disable data-indicator="#top-loader">
    {{ request.csrf_input() }}
    <div style="padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)">
      <span style="background:var(--brand);color:#fff;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800">2</span>
      {{ t('Verify Setup') }}
    </div>
    <div style="padding:32px">
      <p style="font-size:0.875rem;color:var(--fg-2);margin-bottom:24px; line-height:1.6">
        {{ t('Confirm the setup by entering the 6-digit code currently displayed in your authenticator app.') }}
      </p>
      <div class="form-group" style="max-width:320px; margin:0 auto">
        <label class="form-label" style="justify-content:center">{{ form.code._label }}</label>
        {{ form.code.input(placeholder='000 000', autofocus=True, inputmode='numeric', pattern='[0-9]{6}', maxlength='6', style='font-size:1.5rem; letter-spacing:0.3em; text-align:center; height:56px; color:var(--brand); font-weight:700') }}
        {% if form.code.error %}
          <div class="form-error" style="justify-content:center">{{ icon('x', 14) }} {{ form.code.error }}</div>
        {% endif %}
      </div>
    </div>
    <div class="form-footer">
      <div class="form-footer-left">
        {{ btn(t('Confirm & Activate'), 'primary', icon='shield', type='submit', style='width:100%') }}
      </div>
    </div>
  </form>

</div>
{% endblock %}