<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Control de citas{% endblock %}</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        :root {
            --color-primary: #00BC70; /* Fondo principal */
            --color-white: #ffffff;   /* Blanco */
            --color-text: #00BC70;      /* Texto en blanco */
            --color-button: #00BC70;  /* Color de fondo de los botones */
            --color-button-hover: #28e096; /* Color al hacer hover en el botón */
                        --color-footer-text: #ffffff; /* Texto del pie de página */
                    
        }
    </style>
</head>
<body class="relative min-h-screen bg-gray-100 text-gray-800">
    <header class="text-white py-4 shadow" style="background-color: var(--color-primary)">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <h1 class="text-lg font-bold">Control de citas</h1>
            {% if session.user is defined %}
            <a href="{{ base_path }}/logout" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded">
                Cerrar Sesión
            </a>
            {% endif %}
        </div>
    </header>
    <main class="container mx-auto px-4 py-6">
        {% block content %}{% endblock %}
    </main>
    <footer class="absolute bottom-0 inset-x-0 bg-gray-800 text-white text-center py-4">
        <p>&copy; {{ "now"|date("Y") }} NextCoders</p>
    </footer>
</body>
</html>
