{% extends "base.html" %}
{% block title %}{{ t('verify_email') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<div style="min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem">
  <div class="card animate-in" style="max-width:480px;width:100%;padding:3rem;text-align:center;box-shadow:var(--shadow-glow)">
    <div style="font-size:4rem;margin-bottom:1rem;animation:pulse-glow 2s infinite">📧</div>
    <h2 style="margin-bottom:0.5rem">{{ t('verify_email') }}</h2>
    <p style="color:var(--text-secondary);margin-bottom:2rem">{{ t('enter_code') }}</p>
    {% if demo_code %}
      <div class="alert alert-success" style="font-size:2.2rem;font-weight:800;letter-spacing:0.5rem;margin-bottom:0.5rem;box-shadow:var(--shadow-glow)">
        {{ demo_code }}
      </div>
      <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:2rem">{{ t('code_sent_to', email='your email') }}</p>
    {% endif %}
    <form method="POST" action="{{ url_for('auth.verify', uid=uid) }}">
      <div style="margin-bottom:1.5rem">
        <input class="input" type="text" name="code" required placeholder="######" maxlength="6"
               style="text-align:center;font-size:2rem;letter-spacing:0.4rem;font-family:'Orbitron',monospace">
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:1rem;font-size:1.1rem;box-shadow:var(--shadow-glow)">{{ t('verify') }} ✓</button>
    </form>
    <form method="POST" action="{{ url_for('auth.resend', uid=uid) }}" style="margin-top:1.25rem">
      <button type="submit" class="btn btn-outline" style="width:100%">{{ t('resend_code') }} 🔄</button>
    </form>
  </div>
</div>
<style>@keyframes pulse-glow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 20px var(--primary-glow))}50%{transform:scale(1.15);filter:drop-shadow(0 0 50px var(--primary-glow))}}</style>
{% endblock %}