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

{% block body %}
    <div class="container">
        <!-- Filtre par type de greffe -->
        <div class="row mb-4">
            <div class="col-12">
                <form method="get" action="{{ path('app_greffecapillaire') }}">
                    <div class="d-flex flex-wrap">
                        {% for type in typesGreffes %}
                            <div class="form-check me-3">
                                <input class="form-check-input" type="checkbox" name="types[]" value="{{ type.id }}" id="type{{ type.id }}"
                                    {% if type.id in app.request.get('types') %} checked {% endif %}>
                                <label class="form-check-label" for="type{{ type.id }}">
                                     {% if app.request.locale == 'en' %}
                                                {{ type.getTitreEn(app.request.locale) }} <!-- English description -->
                                            {% else %}
                                                {{ type.getTitre(app.request.locale) }} <!-- Default description (French or fallback) -->
                                            {% endif %}
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="submit" class="btn btn-primary mt-3">Filtrer</button>
                </form>
            </div>
        </div>

        <div class="row justify-content-center">
            {% for greffe in greffescapillaires %}
                <div class="col-md-4 mb-4">
                    <!-- Type de greffe au-dessus du carré -->
                    <h5 class="text-center mb-3">{{ greffe.typegreffes.titre }}</h5>

                    <div class="image-comparison-container position-relative">
                        <div class="image-container">
                            <div class="image" id="imageavant" style="background-image: url('{{ asset('upload/images/' ~ greffe.imageavant) }}');"></div>
                            <div class="image" id="imageapres" style="background-image: url('{{ asset('upload/images/' ~ greffe.imageapres) }}');"></div>
                        </div>
                        
                        <!-- Lien pour basculer entre les images -->
                        <div class="vertical-line"></div>
                        
                        <!-- Flèches pour passer d'une image à l'autre -->
                        <div class="arrow-left" onclick="changeImage('left', {{ loop.index }})">
                            <span class="arrow">&#8592;</span>
                        </div>
                        <div class="arrow-right" onclick="changeImage('right', {{ loop.index }})">
                            <span class="arrow">&#8594;</span>
                        </div>
                    </div>

                    <!-- Titre et bouton au survol -->
                    <div class="image-container position-relative">
                        <img src="{{ asset('upload/images/' ~ greffe.imageavant) }}" 
                             alt="{{ greffe.titre }}" 
                             class="img-fluid rounded-3" 
                             style="max-width: 100%; height: auto;">
                         
                        <!-- Titre et bouton au survol -->
                        <div class="hover-content text-center position-absolute top-50 start-50 translate-middle">
                            <h3 class="title-hover">{{ greffe.titre }}</h3>
                            <a href="{{ path('Greffe_show', {'id': greffe.id}) }}" class="btn-en-savoir-plus">En savoir plus</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <style>
        /* Votre CSS déjà présent ici */
    </style>

    <script>
        // Script pour gérer l'effet de navigation entre les images
        function changeImage(direction, index) {
            const imageAvant = document.querySelector(`#imageavant-${index}`);
            const imageApres = document.querySelector(`#imageapres-${index}`);
            
            if (direction === 'left') {
                imageAvant.style.opacity = 1;
                imageApres.style.opacity = 0;
            } else if (direction === 'right') {
                imageAvant.style.opacity = 0;
                imageApres.style.opacity = 1;
            }
        }
    </script>
{% endblock %}