<div class="container-slider">
    {* 
        $slider  = paramètres du slider group
        $slides  = slides de ce slider
    *}

    <div class="img-slider {if $slider->autoPlay} autoplay{/if}">
        
        {foreach from=$slides item=slide key=index}
          
            <div class="slider-items">
                <img src="{$slide['image']}" alt="Slide {$index}" class="slide">

                <div class="text-slider text-slider-{$slide['textPosition']}">
                    <div class="text-content">

                        {if $slide['title']}
                            <h1>{$slide['title']}</h1>
                        {/if}

                        {if $slide['subTitle']}
                            <p>{$slide['subTitle']}</p>
                        {/if}

                        {if $slide['button']}
                            <a href="{$slide['url']}" class="btn">
                                {$slide['button']}
                            </a>
                        {/if}

                    </div>
                </div>
            </div>
        {/foreach}

    </div>

    {if count($slides) > 1}
        <button class="prev">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
                <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/>
            </svg>
        </button>

        <button class="next">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
                <path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/>
            </svg>
        </button>

        <div class="slider-dots">
            {foreach from=$slides item=slide key=index}
                <div class="dot {if $index == 0}active{/if}" data-index="{$index}"></div>
            {/foreach}
        </div>

        <script src="{$urls.base_url}modules/polarisprestatheme/views/js/slider.js"></script>
    {/if}
</div>