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

{% block title %}
    {{ page_title }}
{% endblock %}

{% block nav %}
    {% embed 'nav.html.twig' %}{% endembed %}
{% endblock %}

{% block body %}
    <div class="container">

        <!-- Titre centré au-dessus du switch -->
        <div class="d-flex flex-column align-items-center my-4">
            <h2 id="switchLabel" class="mb-3">Achat</h2> <!-- Le titre centré au-dessus -->
            <label class="switch">
                <input type="checkbox" id="offerTypeSwitch" data-source="home" />
                <span class="slider round"></span>
            </label>
        </div>

        <!-- Conteneur des offres, affichage en grille -->
        <div id="offersContainer" class="row justify-content-center">
            {% for offer in offers %}
                <div class="col-md-4 mb-4"> <!-- Chaque carte occupe 4 colonnes sur les écrans moyens -->
                    <div class="card good-container"
                         data-good="{{ offer.goods }}"
                         data-remaining-quantity="{{ offer.quantity }}"
                         data-good-id="{{ offer.id }}"
                         data-type="{{ offer.gafType ? 'food' : 'non-food' }}">

                        <div class="quantity-badge" data-offer-id="{{ offer.id }}">
                            {{ offer.quantity|number_format(0, '.', '') }}
                        </div> <!-- Macaron pour la quantité -->

                        <img src="{{ absolute_url('/uploads/goodsPictures/' ~ offer.imagePath) }}" alt="{{ offer.goods }}" class="card-img-top">
                        <div class="card-body">
                            <h2 id="h2-{{ offer.id }}" class="card-title">{{ offer.goods }}</h2>
                            <p class="card-text">{{ offer.description }}</p>
                            <div class="price">{{ offer.price }} €</div>
                            <button class="btn btn-primary add-to-basket-btn mt-3"
                                    data-offer-id="{{ offer.id }}"
                                    data-order-id="{{ order.id }}"
                                    data-quantity="{% if not offer.gafType %}{{ offer.quantity }}{% else %}1{% endif %}"
                                    data-csrf-token="{{ csrf_token('add_to_basket') }}">
                                Ajouter au panier
                            </button>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block bodyScript %}
    {{ encore_entry_script_tags('offers') }}
{% endblock %}