{% extends 'base.html.twig' %}

{% block title %}Flowbite Components Demo{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('app-webpack') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('app-webpack') }}
{% endblock %}

{% block body %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
    {# Header #}
    <header class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">
                        <i class="fas fa-palette text-blue-600 mr-2"></i>
                        Flowbite Components Demo
                    </h1>
                    <p class="mt-1 text-sm text-gray-600">
                        Bibliothèque complète de composants Flowbite pour vos futurs développements
                    </p>
                </div>
                <div>
                    <a href="https://flowbite.com/docs/getting-started/introduction/" target="_blank"
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-book mr-2"></i>
                        Documentation Flowbite
                    </a>
                </div>
            </div>
        </div>
    </header>

    {# Main Content #}
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {% block content %}{% endblock %}
    </main>

    {# Footer #}
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <p class="text-center text-sm text-gray-500">
                <i class="fas fa-code mr-1"></i>
                Développé avec Symfony & Flowbite -
                <a href="https://flowbite.com" target="_blank" class="text-blue-600 hover:text-blue-800">flowbite.com</a>
            </p>
        </div>
    </footer>
</div>
{% endblock %}