@props([
  'galleryItems' => [],
  'loaderColor' => 'text-primary',
  ])
<div class="relative min-h-[500px]">
  @if (count($galleryItems) > 0)
    <div id="gallery-loader" class="absolute top-0 left-0 right-0 py-24 z-50 flex items-center justify-center transition-opacity duration-500" data-gallery-loader>
      <div class="text-center {{ $loaderColor }}">
        <svg class="mx-auto h-12 w-12 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <p class="mt-3 text-lg">Loading gallery...</p>
      </div>
    </div>
    <div class="row g-2 opacity-0 transition-opacity duration-500" id="gallery-masonry" data-gallery-masonry data-sl-isotope='{"layoutMode":"packery","packery":{"gutter":0}}'>
      @foreach ($galleryItems as $item)
        <div class="{{ $item['col-class'] }} isotope-item">
          <div class="img-zoom-hover group relative overflow-hidden">
            <a class="{{ $item['type'] === 'video' ? 'video-container relative' : '' }}" href="{{ $item['href'] }}"
              data-gallery="gallery-masonry-css">
              @if ($item['type'] === 'image')
                <img class="block h-auto w-full object-cover" loading="lazy" src="{{ $item['src'] }} "
                  alt="{{ $item['title'] }}" />
              @elseif ($item['type'] === 'video')
                <video class="video block h-full w-full overflow-hidden rounded-lg" muted="muted"
                  data-play-on-hover="data-play-on-hover" poster="{{ $item['poster'] }}">
                  <source src="{{ $item['source_src'] }}" type="video/mp4" />
                </video>
                <div
                  class="video-icon absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-white bg-opacity-50 group-hover:hidden">
                  <svg class="svg-inline--fa fa-video text-xs text-gray-800 sm:text-sm" aria-hidden="true"
                    focusable="false" data-prefix="fas" data-icon="video" role="img"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
                    <path fill="currentColor"
                      d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z">
                    </path>
                  </svg>
                </div>
              @endif
              <div
                class="backdrop-faded absolute bottom-0 left-0 w-full p-3 opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100">
                <h4 class="text-xl font-bold text-white">{{ $item['title'] }}</h4>
              </div>
            </a>
          </div>
        </div>
      @endforeach
    </div>
  @else
    <x-gallery.empty-state />
  @endif
</div>