{% extends "base.twig" %}

{% block title %}Próxima cita{% endblock %}

{% block content %}
<div class="flex items-center justify-center">
    <div class="relative my-40 w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
        <a href="{{ base_path }}/appointment" 
           class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-2xl"
           title="Cerrar">
            &times;
        </a>

        <h1 class="text-2xl font-bold text-center mb-6 text-gray-700">Próxima Cita</h1>

        <div class="text-center text-gray-600 mb-6">
            <p class="mb-2">Tienes una cita programada:</p>
            <ul class="space-y-2">
                <li><strong>Día:</strong> <span class="text-gray-800">{{ appointment.date }}</span></li>
                <li><strong>Locación:</strong> <span class="text-gray-800">{{ appointment.location }}</span></li>
            </ul>
        </div>

        <div class="flex justify-center">
            <a href="{{ base_path }}/appointment" 
               class="inline-block w-full bg-blue-500 text-white text-center py-2 rounded hover:bg-blue-600 transition duration-300">
                Regresar
            </a>
        </div>
    </div>
</div>
{% endblock %}