@extends('layouts.public')

@section('title', $album->title)
@section('meta_description', $album->description)
@section('meta_image', $album->cover_image ? asset_path($album->cover_image) : '')

@section('content')
    <x-page-hero :eyebrow="$album->sector?->name ?: __('Gallery')"
                 :title="$album->title"
                 :subtitle="$album->description"
                 :image="image_url($album->cover_image)"
                 :breadcrumbs="[__('Gallery') => route('gallery.index'), $album->title => null]"
                 :meta="[__('Date') => $album->album_date?->format('d M Y')]" />

    <section class="section" x-data="fragmentFilter('{{ route('fragments.gallery', $album) }}', { media: '{{ $activeMedia }}' })">
        <div class="container-page">
            <div class="mb-10 flex flex-wrap items-center justify-between gap-4">
                <div class="flex gap-2" role="tablist" aria-label="{{ __('Filter album by media type') }}">
                    @foreach (['all' => __('All'), 'photos' => __('Photos'), 'videos' => __('Videos')] as $key => $label)
                        <button type="button" role="tab" @click="apply({ media: '{{ $key }}' })"
                                :aria-selected="is('media', '{{ $key }}')"
                                :class="is('media', '{{ $key }}') ? 'pill-active' : 'pill-idle'">{{ $label }}</button>
                    @endforeach
                </div>

                <a href="{{ route('gallery.index') }}" class="link-arrow">
                    {{ __('All albums') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
                </a>
            </div>

            <div x-ref="results" class="transition-opacity duration-200" :class="loading && 'opacity-40'"
                 aria-live="polite" :aria-busy="loading">
                @include('public.partials.gallery-grid', ['items' => $items])
            </div>
        </div>
    </section>
@endsection