{% extends 'Game/index.html.twig' %}

{% block title %} - Enable Two-Factor Authentication{% endblock %}

{% block body %}
  <div class="auth-page">
    <div class="auth-card auth-card--wide">
      <h2 class="auth-title">Enable Two-Factor Authentication</h2>
      <p class="auth-sub">Scan the QR code with your authenticator app</p>

      <div class="twofa-setup">
        <div class="twofa-setup__qr">
          <img
            src="{{ path('MineSeekerBundle_2fa_qr_code') }}"
            alt="TOTP QR Code"
            width="220"
            height="220"
          />
        </div>

        <div class="twofa-setup__manual">
          <p class="twofa-setup__manual-label">Can't scan? Enter this key manually:</p>
          <code class="twofa-setup__secret">{{ pending_secret }}</code>
        </div>

        <form class="auth-form" method="post" action="{{ path('MineSeekerBundle_2fa_enable') }}">
          <input type="hidden" name="_token" value="{{ csrf_token('2fa_enable') }}"/>

          <div class="auth-field">
            <label for="auth-code" class="auth-label">Verification Code</label>
            <div class="auth-input-wrap">
              <i class="fas fa-shield auth-input-icon"></i>
              <input
                type="text"
                id="auth-code"
                name="_auth_code"
                class="auth-input auth-input--code"
                inputmode="numeric"
                pattern="[0-9]*"
                maxlength="6"
                autocomplete="one-time-code"
                autofocus
                required
                placeholder="000000"
              />
            </div>
            <p class="auth-field-hint">Enter the 6-digit code from your app to confirm setup.</p>
          </div>

          <button type="submit" class="auth-submit">
            <i class="fas fa-check"></i> Activate 2FA
          </button>
        </form>
      </div>

      <div class="auth-back">
        <a href="{{ path('MineSeekerBundle_profile_security') }}">
          <i class="fa fa-chevron-left"></i> Cancel
        </a>
      </div>
    </div>
  </div>
{% endblock %}