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

{% block title %}Deville | Constructions métalliques{% endblock %}

{% block body %}
    <div class="top-visual ">
        <img class="" src="{{ asset('images/slide-deville.jpg') }}" title="" alt="">

        <div class="grid">
            <h1 class="titleLabelWhite"><span class="label opacity-70">CONSTRUCTIONS MÉTALLIQUES</span><span class="icon bgtitlelabel opacity-70"></span><span class="line lineBlack hidden"></span></h1>
        </div>
    </div>

    <!-- Content : Start -->
    <div class="bgGrey5">
        <div class="grid overflow-hidden">
            <div class="mT-22 mB-20 overflow-hidden">
                <div class="col-6-12 mobile-col-1-1 sSize-75 useColumnizer grey6 lH-15">
                    <div class="first column">
                        <p>{{ get_text('constructions_metalliques_1') | nl2br }}</p>
                    </div>

                    <div class="last column">
                        <p>{{ get_text('constructions_metalliques_2') | nl2br }}</p>
                    </div>
                    <br style="clear:both;">
                </div>
                <div class="col-6-12 mobile-col-1-1 mT-10">
                    <div id="carouselProduct" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            {% for slider in sliders %}
                                <div class="carousel-item {% if loop.first %}active{% endif %}">
                                    <img class="d-block w-100" src="{{ slider.photo }}" alt="Slide {{ loop.index }}" style="height: 300px; object-fit: cover;">
                                    <!-- Overlay for title -->
                                    <div class="carousel-caption d-none d-md-block p-0" style="background: rgba(0, 0, 0, 0.6); color: white; padding: 10px;">
                                        <h5>{{ slider.title }}</h5>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        {% if sliders|length > 1 %}
                            <a class="carousel-control-prev" href="#carouselProduct" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselProduct" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Content : End -->

{% endblock %}