{{-- resources/views/block/gallery/index.blade.php --}}
@extends('layout')
@section('title')
  <title>Block {{ $blockName }} — Gallery</title>
@endsection

@section('content')
<section class="container min-vh-100 d-flex align-items-center py-5">
  <div class="w-100">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <h1 class="h3 mb-0">Block {{ $blockName }} — Gallery List</h1>
      <a href="{{ url('/home') }}" class="btn btn-outline-secondary">Back to Menu</a>
    </div>

    @if(session('status'))
      <div class="alert alert-info">{{ session('status') }}</div>
    @endif

    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 justify-content-center">
      @foreach ($items as $item)
        <div class="col d-flex">
          <div class="card h-100 shadow-sm w-100 text-center">
            <div class="ratio ratio-16x9">
              <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" class="object-fit-cover w-100 h-100">
            </div>
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">{{ $item['title'] }}</h5>
              <p class="card-text text-muted">{{ $item['desc'] }}</p>
              <div class="mt-auto">
                {{-- Start navigation to this gallery --}}
                <a href="{{ route('nav.to', ['block' => strtolower($blockName), 'slug' => $item['slug']]) }}"
                   class="btn btn-primary w-100 mb-2">
                  Navigate
                </a>
                {{-- Optional info page --}}
                <a href="{{ route('block.gallery.show', ['block' => strtolower($blockName), 'slug' => $item['slug']]) }}"
                   class="btn btn-outline-secondary w-100">
                  View Info
                </a>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</section>
@endsection