{% extends "base_auth.html" %}
{% load static %}

{% block title %}Verificar Código{% endblock %}

{% block content %}
<div class="bg-white p-10 md:p-16 rounded-sm shadow-premium reveal">
    <div class="text-center mb-12">
        <a href="{% url 'business_landing' %}" class="inline-block mb-10">
            <img src="{% static 'images/logo-citalis.png' %}" alt="Citalis Logo" class="h-10 w-auto">
        </a>
        <h1 class="text-3xl mb-4">Código de acceso.</h1>
        <p class="text-body-text/60 font-medium leading-relaxed">Hemos enviado un código de 6 dígitos a tu correo. Por favor, ingrésalo a continuación.</p>
    </div>

    <form method="post" class="space-y-10">
        {% csrf_token %}
        <div>
            <label class="text-[10px] font-black uppercase tracking-[0.2em] text-body-text/40 mb-6 block text-center">Código de verificación</label>
            <div class="max-w-[280px] mx-auto">
                {{ form.code }}
                {% if form.code.errors %}
                    <p class="text-red-500 text-[10px] mt-3 font-medium text-center">{{ form.code.errors.0 }}</p>
                {% endif %}
            </div>
        </div>
        
        <button type="submit" class="w-full bg-primary text-white py-5 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-primary-dark transition-all shadow-lift">
            Verificar e ingresar
        </button>
    </form>
    
    <div class="mt-12 pt-10 border-t border-accent/20 text-center">
        <a href="{% url 'login' %}" class="inline-flex items-center gap-2 text-primary font-black uppercase tracking-tighter hover:underline decoration-2 underline-offset-4">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Volver a intentar
        </a>
    </div>
</div>

<style type="text/tailwindcss">
    /* Styling for the code input to make it prominent */
    input[name="code"] {
        @apply text-center text-4xl tracking-[0.5em] font-black py-6 bg-transparent border-b-2 border-accent focus:border-primary rounded-none;
    }
</style>
{% endblock %}