{{--
    Баннеры блока.

    Лента сделана прокруткой с привязкой (`scroll-snap`), а не библиотекой:
    она листается пальцем и колесом без единой строки скрипта, работает
    с выключенным JavaScript и не тянет за собой чужой CSS.

    Скрипт (`public/kz-slider.js`) добавляет то, чего прокрутке не хватает
    на десктопе: стрелки, точки и перетаскивание мышью. Он же вешает ленте
    класс `kz-slider--js`, и до тех пор стрелки с точками скрыты — кнопка,
    которая ничего не делает, хуже отсутствующей.
--}}
<div @class(['kz-banners', 'kz-slider-box' => $slider])>
    <div @class(['kz-banners__lane', 'kz-slider' => $slider])
         @if ($slider) data-kz-slider @endif
         @if ($autoplay > 0) data-kz-autoplay="{{ $autoplay }}" @endif>

        @foreach ($banners as $banner)
            @php($tag = $banner['link'] ? 'a' : 'div')

            <{{ $tag }} class="kz-banner"
                @if ($banner['link'])
                    href="{{ $banner['link'] }}"
                    @if ($banner['blank']) target="_blank" rel="noopener" @endif
                @endif>

                @if ($banner['image'])
                    {{-- Первый баннер грузится сразу: он и есть то большое,
                         ради чего страница выглядит загруженной. Отложи его —
                         и шапка сайта будет пустой первые полсекунды. --}}
                    <img class="kz-banner__image"
                         src="{{ $banner['image'] }}"
                         alt="{{ $banner['alt'] }}"
                         draggable="false"
                         loading="{{ $loop->first ? 'eager' : 'lazy' }}">
                @endif

                @if ($banner['title'] || $banner['text'] || $banner['button'])
                    <span class="kz-banner__body">
                        @if ($banner['title'])
                            <span class="kz-banner__title">{{ $banner['title'] }}</span>
                        @endif

                        @if ($banner['text'])
                            <span class="kz-banner__text">{{ $banner['text'] }}</span>
                        @endif

                        @if ($banner['button'])
                            <span class="kz-banner__button">{{ $banner['button'] }}</span>
                        @endif
                    </span>
                @endif
            </{{ $tag }}>
        @endforeach
    </div>

    @if ($arrows)
        <button type="button" class="kz-slider__arrow kz-slider__arrow--prev"
                data-kz-slider-prev hidden aria-label="Предыдущий баннер">&#8249;</button>

        <button type="button" class="kz-slider__arrow kz-slider__arrow--next"
                data-kz-slider-next hidden aria-label="Следующий баннер">&#8250;</button>
    @endif

    {{-- Точки рисует скрипт: их столько же, сколько баннеров, и печатать
         их в шаблоне значило бы считать одно и то же в двух местах. --}}
    @if ($dots)
        <div class="kz-slider__dots" data-kz-slider-dots></div>
    @endif
</div>

@if ($slider)
    <script src="{{ \Korzilla\Core\Http\BaseStyles::sliderUrl() }}" defer></script>
@endif