@php
    $scrollId = $scrollId ?? 'snapshot-nav-scroll';
@endphp

<div class="snapshot-nav-container {{ $wrapperClass ?? '' }} reveal">
    <button type="button" class="snapshot-nav-arrow snapshot-nav-prev" aria-label="Scroll left">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
    </button>

    <div
        class="snapshot-nav-scroll"
        id="{{ $scrollId }}"
        @if (! empty($navLabel)) role="tablist" aria-label="{{ $navLabel }}" @endif
    >
        @foreach ($tabs as $index => $tab)
            <button
                type="button"
                class="snapshot-tab-btn{{ $index === ($activeIndex ?? 0) ? ' is-active' : '' }}"
                @foreach ($tab['attrs'] ?? [] as $attr => $value)
                    {{ $attr }}="{{ $value }}"
                @endforeach
            >
                {{ $tab['label'] }}
            </button>
        @endforeach
    </div>

    <button type="button" class="snapshot-nav-arrow snapshot-nav-next" aria-label="Scroll right">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
    </button>
</div>