{% extends "base.html" %}
{% load i18n %}

{% block head_title %}Verified Email Required{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 flex items-center justify-center py-12 px-4">
  <div class="w-full max-w-md">

    <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">

      <div class="bg-gradient-to-r from-slate-800 to-slate-900 px-8 pt-8 pb-6 text-center">
        <div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-yellow-500/20 border border-yellow-500/30 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <h1 class="text-2xl font-bold text-white">Verified Email Required</h1>
      </div>

      <div class="px-8 py-8 space-y-4">
        <p class="text-slate-600">
          This page is only accessible to users with a verified email address. Please verify your email to continue.
        </p>
        <p class="text-slate-500 text-sm">
          Check your inbox for a verification email, or visit your
          <a href="{% url 'account_email' %}" class="text-indigo-600 hover:text-indigo-500 font-medium">email settings</a>
          to request a new verification message.
        </p>
        <div class="pt-2 flex gap-3">
          <a href="{% url 'account_email' %}"
             class="flex-1 text-center bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2.5 px-4 rounded-xl transition-colors">
            Email Settings
          </a>
          <a href="/"
             class="flex-1 text-center bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium py-2.5 px-4 rounded-xl transition-colors">
            Go Home
          </a>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}