@props([
    'slides' => [],
    'autoplay' => true,
    'interval' => 4000,
])

<div 
    class="fluent-image-slider" 
    data-fluent-image-slider 
    data-autoplay="{{ $autoplay ? 'true' : 'false' }}" 
    data-interval="{{ $interval }}" 
>

    {{-- TRACK --}}
    <div class="fluent-image-slider__track">

        @if(count($slides))
            @foreach($slides as $slide)
                <div class="fluent-image-slider__slide">
                    <img src="{{ $slide['image'] ?? '' }}" class="fluent-image-slider__image" />

                    {{-- CONTENT (PER SLIDE) --}}
                    @if(!empty($slide['content']))
                        <div class="fluent-image-slider__content">
                            <div class="container">
                                {!! $slide['content'] !!}
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        @else
            {{-- EMPTY STATE SLOT (KEEP HEIGHT) --}}
            <div class="fluent-image-slider__empty">
                {{ $slot ?? '' }}
            </div>
        @endif

    </div>

    {{-- NAV --}}
    @if(count($slides))
        <button class="fluent-image-slider__nav fluent-image-slider__nav--prev" type="button" data-action="prev">
            <x-fluent-icon
                name="chevron_left"
                size="md"
            />
        </button>
        <button class="fluent-image-slider__nav fluent-image-slider__nav--next" type="button" data-action="next">
            <x-fluent-icon
                name="chevron_right"
                size="md"
            />
        </button>

        <div class="fluent-image-slider__dots" data-dots></div>
    @endif

</div>