@extends('shop::layouts.master')

@include('shop::guest.compare.compare-products')

@section('page_title')
    {{ __('velocity::app.pages.gallery.title') }}
@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet">
@endpush

@section('content-wrapper')
    <h1 class="text-center my-4">{{ __('velocity::app.pages.gallery.title') }}</h1>

    @if (count($gallery) < 1)
        <div class="gallery-empty">
            {{ __('velocity::app.pages.gallery.empty') }}
        </div>
    @else
        <div class="gallery-container">
            @foreach ($gallery as $image)
                <div class="gallery-item">
                    <a href="{{ env('CDN_URL') . $image['path'] }}" data-lightbox="gallery" data-title="{{ $image['title'] }}">
                        <img src="{{ env('CDN_URL') . $image['path'] }}" alt="{{ $image['title'] }}" loading="lazy">
                    </a>
                    @if (!empty($image['slider_path']))
                        <a href="{{ $image['slider_path'] }}" target="_blank" class="external-link-icon" title="Open External Link">
                            🔗
                        </a>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
@endpush