{{-- resources/views/block/gallery/show.blade.php --}}
@extends('layout')

@section('title')
  <title>{{ $title }} — Block {{ $blockName }}</title>
@endsection

@section('content')
{{-- <section class="container min-vh-100 py-5">
  <div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0">{{ $title }} <small class="text-muted">— Block {{ $blockName }}</small></h1>
    <a href="{{ route('block.gallery', ['block' => strtolower($blockName)]) }}"
       class="btn btn-outline-secondary">Back to Block {{ $blockName }}</a>
  </div>

  <div class="ratio ratio-16x9 mb-3">
    <img src="{{ $image }}" alt="{{ $title }}" class="object-fit-cover w-100 h-100">
  </div>

  <p class="text-muted mb-0">Slug: <code>{{ $slug }}</code></p>
</section> --}}
<section class="container min-vh-100 py-5">
  <div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0">{{ $title }} <small class="text-muted">— Block {{ $blockName }}</small></h1>
    <a href="{{ route('block.gallery', ['block' => strtolower($blockName)]) }}" class="btn btn-outline-secondary">
      Back to Block {{ $blockName }}
    </a>
  </div>

  {{-- Carousel --}}
  <div id="galleryCarousel" class="carousel slide shadow rounded mb-4" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-inner">
      @foreach($images as $index => $img)
        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
          <img src="{{ $img }}" class="d-block w-100 rounded" alt="{{ $title }}">
        </div>
      @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  {{-- Description Drawer --}}
  <div class="card border-0 shadow-sm">
    <div class="card-body">
      <h5 class="card-title mb-3">About This Gallery</h5>
      <p class="card-text text-muted">{{ $desc }}</p>
    </div>
  </div>
</section>

@endsection