{% if component.enabled == true %}
    {% set config = component.configuration.config|default([]) %}
    {% set cssClass = config.cssClass|default('slider') %}
    {% set sliderName = config.sliderName|default('Slider') %}
    {% set sliderHeight = config.sliderHeight|default('60vh') %}
    {% set temporisation = config.temporisation|default(5000) %}
    {% set transition = config.transitionType|default('fade') %}
    {% set items = config.items|default([]) %}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <div class="{{ cssClass }} component-slider swiper" id="slider-{{ component.id }}">
        <div class="swiper-wrapper" style="height: {{ sliderHeight }};">
            {% for item in items|sort((a, b) => a.order <=> b.order) %}
                <div class="swiper-slide">
                    {% if item.link %}<a href="{{ item.link }}">{% endif %}
                        <img src="{{ item.image }}" alt="{{ item.title|default(sliderName) }}" />
                        {% if item.title or item.description %}
                            <div class="slide-content">
                                {% if item.title %}<h3>{{ item.title }}</h3>{% endif %}
                                {% if item.description %}<p>{{ item.description }}</p>{% endif %}
                            </div>
                        {% endif %}
                    {% if item.link %}
					</a>
					{% endif %}
                </div>
            {% endfor %}
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script>
        const swiper = new Swiper("#slider-{{ component.id }}", {
            loop: true,
            effect: "{{ transition }}",
            autoplay: {
                delay: {{ temporisation }},
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            slidesPerView: 1,
        });
    </script>

    <style>
        #slider-{{component.id}} {
            width: 100%;
            max-height: 600px;
            overflow: hidden;
        }

        #slider-{{component.id}} .swiper-slide {
            position: relative;
            width: 100%;
            height: {{ sliderHeight }};
        }

        #slider-{{component.id}} img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #slider-{{component.id}} .slide-content {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            max-width: 80%;
        }

        @media (max-width: 768px) {
            #slider-{{component.id}} .slide-content {
                font-size: 0.9em;
                padding: 8px;
            }
        }
    </style>
{% endif %}