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

{% block title %}Nos formules - Brunchology{% endblock %}

{% block body %}
    <style>
        body {
            background-image: url('asset/images/pexels-mathias-reding-9381051.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            font-family: Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1px;
        }

        h1 {
            text-align: center;
            color: #fff;
            margin-top: 50px;
            font-size: 36px;
        }

        /* p {
            text-align: center;
            color: #fff;
            font-size: 18px;
            margin-bottom: 50px;
        } */

        .formules {
            text-align: center;
        }

        .formule {
            width: 90%;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            margin-left: 2rem;
            display: inline-block;
            vertical-align: top;
        }

        .formule img {
            width: 100%;
            height: auto;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .formule-content {
            padding: 20px;
        }

        .formule-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .formule-description {
            color: #666;
            margin-bottom: 10px;
        }

        .produits-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .produit {
            color: #666;
            margin-bottom: 5px;
            margin-right: 10px;
            padding: 5px 10px;
            border-radius: 20px;
            background-color: #f0f0f0;
            display: inline-block;
        }
    </style>

    <div class="container">
        <h1 style="color:black;">NOS FORMULES</h1>
        <p style="color:black;">
            Explorez nos trois formules de brunch uniques, chacune offrant une expérience gastronomique inoubliable adaptée à vos envies. Du Brunch Classique pour les amateurs de tradition au Brunch Gourmand pour les épicuriens, jusqu'au Brunch Végétarien pour les adeptes d'une cuisine plus verte, savourez chaque matinée avec délice et variété chez nous.
        </p>

        <div class="formules d-flex flex-direction-column">
            {% for Formule in Formules %}
            <a href="{{path('app_formulesslug', {'slug' : Formule.slug})}}">
            <div class="formule">
                <img src="/uploads/images/{{ Formule.illustration }}" alt="Illustration {{ Formule.nom }}">
                <div class="formule-content">
                    <h2 class="formule-title">Formule {{ Formule.nom }}</h2>
                    <p class="formule-description">{{ Formule.Description }}</p>
                    <ul class="produits-list">
                        {% for produit in Formule.Produits %}
                        <li class="produit">{{ produit.getNom() }}</li>
                        </a>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

{% endblock %}