{% extends "web/base.html.twig" %}
{% block body %}
<!-- WRAPPER -->
<div class="wrapper">
    <!-- CONTAINER -->
    <div class="content container">

        <div class="row">
            <div class="col-md-12 padding-bottom-xl padding-top-xl">
                <img src="{{ asset('images/uploaded/' ~ page.imageHeader) }}" alt="">
            </div>
            <div class="col-md-12 padding-bottom-xl">
                <h1>{{ title }}</h1>
                <p class="lead text-center">{{ subtitle }}</p>
            </div>
        </div>

        {% include './web/blocks/img-text.html.twig' %}
            <div class="row jumbotron jumbotron-fluid" style="background-color: rgb(150, 205, 49); color: white; text-align: center;">
                <div class="container">
                    <h2 class="display-4">
                        {% if app.request.attributes.get('_locale') == 'ca' %}
                        Tens algun dubte?
                        {% else %}
                        ¿Tienes alguna duda?
                        {% endif %}
                    </h2>
                    <p class="lead">
                        {% if app.request.attributes.get('_locale') == 'ca' %}
                        Estem aquí per ajudarte! Contacta amb nosaltres.
                        {% else %}
                        ¡Estamos aquí para ayudarte! Contacta con nosotros.
                        {% endif %}
                    </p>
                    <a class="btn btn-light btn-lg" href="{{ path('contact') }}" role="button">Contactar</a>
                </div>
            </div>
        {% if gallery is not null%}
        <div class="row irow home-content">
            <div class="splide">
                <div class="splide__track hes-gallery">
                    <ul class="splide__list">
                        {% for image in gallery.images %}
                            <li class="splide__slide">
                                <img src="{{ asset('images/uploaded/' ~ image.image) }}" alt="{{ image.title }}"  data-title="{{ image.title }}">
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    <!-- /.container -->


</div>
<!-- /.wrapper -->
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Splide( '.splide', {
                type     : 'fade',
                heightRatio: 0.5,    // Adjust the height ratio to control the height of vertical images
                fixedWidth : 0,      // Allow variable slide widths
                fixedHeight: 0,
                pagination: false
            }).mount();

            var splide = document.querySelector('.splide');

            splide.addEventListener('mounted', function () {
                showImageTitle(splide.querySelector('.splide__slide.is-active img'));
            });

            splide.addEventListener('moved', function () {
                var activeSlide = splide.querySelector('.splide__slide.is-active img');
                showImageTitle(activeSlide);
            });

            function showImageTitle(imgElement) {
                var title = imgElement.getAttribute('data-title');
                // Customize how you want to display the title, for example, you can use an alert, console.log, or update a separate HTML element.
                console.log('Image Title:', title);
            }
        });
        </script>
{% endblock %}