{% extends "base.twig" %}

{% block title %}Cita de hoy{% endblock %}

{% block content %}
<div class="flex items-center justify-center ">
    <div class="relative my-40 w-1/3 bg-white p-6 rounded shadow">
        <a href="{{ base_path }}/appointment" 
           class="absolute top-0 right-0 mt-2 mr-2 text-gray-500 hover:text-gray-700 text-2xl"
           title="Cancelar">
            &times;
        </a>
        
        <h1 class="text-xl font-bold mb-4 text-center">Detalle de cita</h1>
        <p class="mb-2 text-center">Tienes una cita hoy en: <strong>{{ appointment.location }}</strong>.</p>
        <p class="mb-4 text-center">Hora: <strong>{{ appointment.hour }}</strong>.</p>
        
        <form action="{{ base_path }}/appointment/attend" method="POST" class="mb-4">
            <input type="hidden" name="appointment_id" value="{{ appointment.id }}">
            <button type="submit" class="w-full bg-green-500 text-white py-2 rounded hover:bg-green-600">
                Atender
            </button>
        </form>
    </div>
</div>
{% endblock %}