{% extends 'auth_base.html' %}
{% load static %}

{% block title %}Verify Email - Trademont{% endblock %}
{% block description %}Verify your email address to complete your Trademont registration.{% endblock %}

{% block content %}
<!-- Fullscreen, responsive split layout: mobile keeps card; desktop is full-bleed two-column -->
<div class="w-full min-h-screen grid lg:grid-cols-2 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
  <!-- Left visual panel (desktop only) -->
  <div class="relative hidden lg:flex flex-col justify-center p-16 xl:p-24 overflow-hidden">
    <!-- Decorative blobs -->
    <div class="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-amber-500/10 blur-3xl"></div>
    <div class="absolute -bottom-24 -right-24 w-[32rem] h-[32rem] rounded-full bg-blue-500/10 blur-3xl"></div>

    <div class="relative max-w-xl">
      <div class="w-20 h-20 bg-gradient-to-r from-amber-500 to-blue-500 rounded-3xl flex items-center justify-center mb-8 shadow-2xl shadow-amber-500/10">
        <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
      </div>
      <h1 class="text-4xl font-extrabold tracking-tight text-white mb-4">Verify your email</h1>
      <p class="text-slate-300 leading-relaxed text-lg">For your security, enter the 6‑digit code we sent to <span class="text-amber-400 font-semibold">{{ user.email }}</span>. This helps keep your account safe.</p>

      <div class="mt-10 grid grid-cols-2 gap-4 max-w-md">
        <div class="glass-card p-4 rounded-2xl border border-amber-500/20">
          <p class="text-sm text-slate-300">Encrypted verification</p>
        </div>
        <div class="glass-card p-4 rounded-2xl border border-blue-500/20">
          <p class="text-sm text-slate-300">One‑time use code</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Right form panel -->
  <div class="flex items-center justify-center p-6 sm:p-10 lg:p-16">
    <div class="w-full max-w-md glass-card p-8 rounded-3xl">
      <!-- Header (mobile) -->
      <div class="text-center mb-8 lg:hidden">
        <div class="w-16 h-16 bg-gradient-to-r from-amber-500 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
        </div>
        <h2 class="text-3xl font-bold text-white mb-2">Verify Your Email</h2>
        <p class="text-slate-300">We've sent a verification code to <span class="text-amber-400 font-semibold">{{ user.email }}</span></p>
      </div>

      <!-- Flash messages -->
      {% if messages %}
      <div aria-live="polite" class="mb-4 space-y-2">
        {% for message in messages %}
          <div class="rounded-xl border p-3 text-sm {% if message.tags == 'error' %}border-red-500/40 bg-red-500/10 text-red-200{% elif message.tags == 'success' %}border-amber-500/40 bg-amber-500/10 text-amber-200{% else %}border-slate-500/40 bg-slate-500/10 text-slate-200{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Form -->
      <form method="post" class="space-y-6">
        {% csrf_token %}

        <div class="space-y-4">
          <div class="space-y-2">
            <label class="block text-sm font-medium text-slate-300">Enter Verification Code</label>
            {{ form.otp_code }}
            {% if form.otp_code.errors %}
              <div class="text-red-400 text-sm">{{ form.otp_code.errors.0 }}</div>
            {% endif %}
          </div>

          <div class="text-center">
            <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-amber-500 to-blue-500 text-white rounded-xl hover:from-amber-600 hover:to-blue-600 transition-all duration-300 font-semibold">
              Verify Email
            </button>
          </div>
        </div>
      </form>

      <!-- Help Text -->
      <div class="mt-8 text-center">
        <p class="text-slate-400 text-sm mb-4">Didn't receive the code?</p>
        <div class="flex gap-4 justify-center">
          <button type="button" onclick="resendOTP()" class="text-amber-400 hover:text-amber-300 text-sm font-medium transition-colors">
            Resend Code
          </button>
          <a href="{% url 'accounts:register' %}" class="text-slate-400 hover:text-slate-300 text-sm font-medium transition-colors">
            Change Email
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function resendOTP() {
  // In a real implementation, this would make an AJAX request to resend the OTP
  alert('OTP resent! Please check your email.');
}

// Auto-focus on OTP input
document.addEventListener('DOMContentLoaded', function() {
  const otpInput = document.querySelector('input[name="otp_code"]');
  if (otpInput) {
    otpInput.focus();
  }
});

// Auto-submit when 6 digits are entered
document.querySelector('input[name="otp_code"]').addEventListener('input', function(e) {
  if (e.target.value.length === 6) {
    // Auto-submit the form
    setTimeout(() => {
      e.target.form.submit();
    }, 500);
  }
});
</script>
{% endblock %}