{% extends 'base.html' %}
{% block title %}Two-Factor Verification – Chiez Stores{% endblock %}
{% block extra_css %}
<style>
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;background:#f9f7f4;padding:40px 20px;}
.auth-box{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.1);padding:40px 32px;}
.auth-input{width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-family:var(--sans);font-size:20px;letter-spacing:8px;text-align:center;outline:none;transition:all .2s;}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.1);}
.auth-btn{width:100%;padding:13px;background:var(--black);color:#fff;border:none;border-radius:8px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:10px;}
.auth-btn:hover{background:var(--gold);}
.auth-btn.secondary{background:#fff;color:var(--black);border:1.5px solid #e2e8f0;margin-top:8px;}
.auth-btn.secondary:hover{border-color:var(--gold);color:var(--gold);}
</style>
{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="auth-box">
    <div style="text-align:center;margin-bottom:24px;">
      <div style="width:56px;height:56px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;">🔒</div>
      <h1 style="font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:6px;">Two-Factor Verification</h1>
      <p style="font-size:13px;color:#64748b;">
        We sent a 6-digit code via <strong style="color:#374151;">{{ method_label }}</strong>
      </p>
    </div>

    {% if resent %}
      <div style="font-size:12px;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:8px 12px;margin-bottom:16px;text-align:center;">
        A new code has been sent.
      </div>
    {% endif %}

    <form method="POST">
      {% csrf_token %}
      <div style="margin-bottom:16px;">
        <label style="display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#374151;margin-bottom:6px;">Enter Code</label>
        <input type="text" class="auth-input" name="token"
              maxlength="6" inputmode="numeric" autocomplete="one-time-code"
              autofocus placeholder="000000">
        {% if errors.token %}
          <p style="font-size:12px;color:#dc2626;margin-top:4px;">{{ errors.token }}</p>
        {% endif %}
      </div>

      <button type="submit" class="auth-btn">Verify &amp; Sign In</button>
      <button type="submit" name="resend" class="auth-btn secondary">Resend Code</button>
    </form>

    <div style="text-align:center;margin-top:20px;font-size:13px;color:#64748b;">
      Wrong account? <a href="{% url 'users:login' %}" style="color:var(--gold);font-weight:600;">Back to login</a>
    </div>
  </div>
</div>
{% endblock %}