{% extends "base.html" %}
{# CUI // SP-CTI #}
{% block title %}MFA Verification — ICDEV™{% endblock %}

{% block content %}
<div class="container" style="max-width:420px;margin:3rem auto;">
  <div class="card" style="padding:2rem;">
    <h2 style="margin-top:0;">Two-Factor Verification</h2>
    <p class="text-muted">Enter the 6-digit code from your authenticator app to continue.</p>

    {% if error %}
    <div class="alert alert-danger" role="alert">{{ error }}</div>
    {% endif %}

    <form method="POST" action="{{ url_for('auth_mfa.verify') }}">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
      {% if next_url %}
      <input type="hidden" name="next" value="{{ next_url }}">
      {% endif %}

      <div class="form-group" style="margin-bottom:1rem;">
        <label for="totp_code" style="display:block;margin-bottom:0.4rem;font-weight:600;">Authentication Code</label>
        <input type="text" id="totp_code" name="totp_code"
               inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
               placeholder="000000" autocomplete="one-time-code"
               style="width:100%;padding:0.6rem 0.8rem;font-size:1.5rem;letter-spacing:0.5rem;text-align:center;border:1px solid #30363d;border-radius:6px;background:#0d1117;color:#e6edf3;"
               required autofocus>
      </div>

      <button type="submit" class="btn btn-primary" style="width:100%;margin-bottom:0.75rem;">Verify</button>
    </form>

    <form method="POST" action="{{ url_for('auth_mfa.verify_backup') }}" style="margin-top:0.5rem;">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
      {% if next_url %}
      <input type="hidden" name="next" value="{{ next_url }}">
      {% endif %}
      <div class="form-group" style="margin-bottom:0.75rem;">
        <label for="backup_code" style="display:block;margin-bottom:0.4rem;font-size:0.85rem;color:#8b949e;">Use a backup recovery code instead</label>
        <input type="text" id="backup_code" name="backup_code"
               placeholder="XXXXXXXX" maxlength="8"
               style="width:100%;padding:0.5rem 0.8rem;font-size:0.95rem;letter-spacing:0.2rem;text-align:center;border:1px solid #30363d;border-radius:6px;background:#0d1117;color:#e6edf3;">
      </div>
      <button type="submit" class="btn btn-secondary" style="width:100%;font-size:0.85rem;">Use Recovery Code</button>
    </form>
  </div>
</div>
{% endblock %}
{# CUI // SP-CTI #}