{% extends 'companies/superadmin/base.html' %}
{% block content %}

<style>
.verify-card {
  max-width: 480px;
  margin: 60px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(79,70,229,0.12);
  overflow: hidden;
}
.verify-header {
  background: linear-gradient(135deg, #1e3c72, #4F46E5);
  padding: 36px 40px 28px;
  text-align: center;
  color: #fff;
}
.verify-header .shield-icon {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}
.verify-body { padding: 36px 40px; }

.otp-input {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  width: 100%;
  color: #1e1b4b;
  transition: border-color 0.2s;
  background: #f8fafc;
}
.otp-input:focus {
  outline: none;
  border-color: #4F46E5;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}
.btn-verify {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-verify:hover { opacity: 0.9; transform: translateY(-1px); }
.method-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #eef2ff; color: #4F46E5;
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 20px;
}
.info-box {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #0369a1;
  margin-bottom: 20px;
}
.resend-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: #64748b;
}
.resend-link a { color: #4F46E5; font-weight: 600; text-decoration: none; }
.resend-link a:hover { text-decoration: underline; }
</style>

<div class="verify-card">
  <div class="verify-header">
    <div class="shield-icon">
      <i class="fas {% if is_totp %}fa-mobile-alt{% else %}fa-envelope-open-text{% endif %}"></i>
    </div>
    <h4 class="mb-1 fw-bold">Two-Factor Verification</h4>
    <p class="mb-0 opacity-75" style="font-size:14px;">
      SwiftPOS Superadmin — extra security layer
    </p>
  </div>

  <div class="verify-body">

    {% if messages %}
      {% for msg in messages %}
        <div class="alert alert-{% if 'verified' in msg.message or 'sent' in msg.message %}success{% else %}danger{% endif %} rounded-3 border-0 mb-4" style="font-size:14px;">
          <i class="fas fa-{% if 'verified' in msg.message or 'sent' in msg.message %}check-circle{% else %}exclamation-circle{% endif %} me-2"></i>
          {{ msg }}
        </div>
      {% endfor %}
    {% endif %}

    {% if is_email %}
      <div class="method-badge">
        <i class="fas fa-envelope"></i> Email OTP
      </div>
      <div class="info-box">
        <i class="fas fa-info-circle me-1"></i>
        A 6-digit code was sent to <strong>{{ masked_email }}</strong>.
        It expires in 10 minutes.
      </div>
    {% else %}
      <div class="method-badge">
        <i class="fas fa-mobile-alt"></i> Google Authenticator
      </div>
      <div class="info-box">
        <i class="fas fa-info-circle me-1"></i>
        Open your Authenticator app and enter the current 6-digit code for
        <strong>SwiftPOS Superadmin</strong>.
      </div>
    {% endif %}

    <form method="POST" id="verifyForm">
      {% csrf_token %}
      <input
        type="text"
        name="code"
        id="codeInput"
        class="otp-input"
        maxlength="6"
        inputmode="numeric"
        pattern="[0-9]{6}"
        placeholder="• • • • • •"
        autocomplete="one-time-code"
        autofocus
        required
      >
      <button type="submit" class="btn-verify">
        <i class="fas fa-shield-alt me-2"></i> Verify &amp; Enter
      </button>
    </form>

    {% if is_email %}
    <div class="resend-link">
      Didn't receive it?
      <a href="{% url 'superadmin_2fa_resend' %}">Resend OTP</a>
    </div>
    {% endif %}

    <div class="resend-link mt-3">
      <a href="{% url 'logout' %}" class="text-danger">
        <i class="fas fa-sign-out-alt me-1"></i> Cancel &amp; Logout
      </a>
    </div>

  </div><!-- /verify-body -->
</div>

<script>
// Auto-submit when 6 digits entered
document.getElementById('codeInput').addEventListener('input', function() {
  this.value = this.value.replace(/\D/g, '').slice(0, 6);
  if (this.value.length === 6) {
    document.getElementById('verifyForm').submit();
  }
});
</script>

{% endblock %}