{{--
    Project Gallery: a strip of large framed photos that scrolls freely and smoothly (no snapping
    to a photo). Move it by swiping (phones), trackpad / shift+wheel, dragging with the mouse,
    or dragging the bar underneath, which works like a scrollbar and moves the strip in real time.
    Native browser scrolling - no slider library. Styles: _carousel-centre.scss.
    Uses each slide's Image, Alt Text, Title Tag, Sort Order and (optional) URL.
    Columns and aspect ratio settings are ignored for this type.
--}}
@php
    $slides = $sub->subcomponents
        ->filter(function ($slide) { return !empty($slide->image); })
        ->sortBy(function ($slide) { return [$slide->sort_order ?? PHP_INT_MAX, $slide->id]; })
        ->values();
    $sliderId = 'gallery-slider-' . $sub->id;
@endphp

@if($slides->count())
    <div class="gallery-slider {{ $item->classes ?? '' }}" id="{{ $sliderId }}">
        <div class="gallery-slider__viewport">
            <div class="gallery-slider__strip">
                @foreach($slides as $slide)
                    <div class="gallery-slider__slide">
                        <div class="gallery-slider__frame">
                            @if(!empty($slide->url))<a href="{{ $slide->url }}" draggable="false">@endif
                            <div class="gallery-slider__image">
                                <img src="{{ $slide->image }}" alt="{{ $slide->alt_text ?? '' }}" title="{{ $slide->title_tag ?? '' }}" draggable="false">
                            </div>
                            @if(!empty($slide->url))</a>@endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        @if($slides->count() > 1)
            <div class="gallery-slider__progress" aria-hidden="true">
                <span class="gallery-slider__progress-bar"></span>
            </div>
        @endif
    </div>

    @if($slides->count() > 1)
        <script>
            (function () {
                var root = document.getElementById('{{ $sliderId }}');
                var viewport = root.querySelector('.gallery-slider__viewport');
                var track = root.querySelector('.gallery-slider__progress');
                var thumb = root.querySelector('.gallery-slider__progress-bar');

                function maxScroll() { return Math.max(0, viewport.scrollWidth - viewport.clientWidth); }
                function thumbWidth() { return track.clientWidth * Math.min(1, viewport.clientWidth / viewport.scrollWidth); }

                // Bar mirrors the strip: thumb size = share of the strip in view, position = how far it's scrolled.
                function syncThumb() {
                    var w = thumbWidth();
                    var travel = track.clientWidth - w;
                    var ratio = maxScroll() ? viewport.scrollLeft / maxScroll() : 0;
                    thumb.style.width = w + 'px';
                    thumb.style.left = (travel * ratio) + 'px';
                }
                viewport.addEventListener('scroll', syncThumb, { passive: true });
                window.addEventListener('resize', syncThumb);
                window.addEventListener('load', syncThumb);
                syncThumb();

                // Dragging the bar (or pressing anywhere on it) scrolls the strip in real time.
                var barDrag = null;
                track.addEventListener('pointerdown', function (e) {
                    var box = track.getBoundingClientRect();
                    var thumbBox = thumb.getBoundingClientRect();
                    var grab = (e.clientX >= thumbBox.left && e.clientX <= thumbBox.right)
                        ? e.clientX - thumbBox.left
                        : thumbBox.width / 2;
                    barDrag = { grab: grab };
                    track.setPointerCapture(e.pointerId);
                    root.classList.add('is-scrubbing');
                    scrubTo(e.clientX);
                    e.preventDefault();
                });
                track.addEventListener('pointermove', function (e) { if (barDrag) scrubTo(e.clientX); });
                ['pointerup', 'pointercancel'].forEach(function (type) {
                    track.addEventListener(type, function () { barDrag = null; root.classList.remove('is-scrubbing'); });
                });
                function scrubTo(clientX) {
                    var box = track.getBoundingClientRect();
                    var travel = box.width - thumbWidth();
                    var left = Math.max(0, Math.min(travel, clientX - box.left - barDrag.grab));
                    viewport.scrollLeft = travel ? (left / travel) * maxScroll() : 0;
                }

                // Mouse: click and drag the photos to scroll (touch screens already swipe natively).
                var photoDrag = null;
                viewport.addEventListener('pointerdown', function (e) {
                    if (e.pointerType !== 'mouse' || e.button !== 0) return;
                    photoDrag = { x: e.clientX, scroll: viewport.scrollLeft, moved: false };
                    viewport.setPointerCapture(e.pointerId);
                });
                viewport.addEventListener('pointermove', function (e) {
                    if (!photoDrag) return;
                    var dx = e.clientX - photoDrag.x;
                    if (Math.abs(dx) > 3) { photoDrag.moved = true; root.classList.add('is-dragging'); }
                    viewport.scrollLeft = photoDrag.scroll - dx;
                });
                ['pointerup', 'pointercancel'].forEach(function (type) {
                    viewport.addEventListener(type, function () {
                        if (photoDrag && photoDrag.moved) {
                            // A drag shouldn't also count as clicking a photo's link.
                            viewport.addEventListener('click', function stop(ev) { ev.preventDefault(); ev.stopPropagation(); viewport.removeEventListener('click', stop, true); }, true);
                        }
                        photoDrag = null;
                        root.classList.remove('is-dragging');
                    });
                });
            })();
        </script>
    @endif
@endif