@extends('layout')

@section('title', $album['display'])

@section('content')
    <main class="page album-page">
        <nav class="breadcrumb">
            <a href="{{ route('home') }}">Accueil</a>
            <span>›</span>
            <a href="{{ route('home') }}#{{ $album['category'] }}">{{ $category }}</a>
        </nav>

        <header class="album-header">
            <p class="album-kicker">{{ $category }}</p>
            <h1>{{ $album['display'] }}</h1>
            @if(!empty($album['texts']))
                <div class="album-texts">
                    @foreach($album['texts'] as $t)
                        <p>{{ $t }}</p>
                    @endforeach
                </div>
            @endif
            <p class="album-count">{{ $album['count'] }} photos</p>
        </header>

        <div class="photo-grid" id="grid">
            @foreach($album['images'] as $i => $img)
                <button class="photo" data-index="{{ $i }}"
                        data-reveal data-reveal-delay="{{ ($i % 4) * 70 }}"
                        data-full="{{ \App\Support\Gallery::photo($img) }}">
                    <img loading="lazy"
                         src="{{ \App\Support\Gallery::photo($img) }}"
                         alt="{{ $album['display'] }} — photo {{ $i + 1 }}">
                </button>
            @endforeach
        </div>

        <nav class="album-pager">
            @if($neighbours['prev'])
                <a class="pager-prev" href="{{ route('album', $neighbours['prev']['slug']) }}">
                    <span>← Précédent</span><strong>{{ $neighbours['prev']['display'] }}</strong>
                </a>
            @else <span></span> @endif

            @if($neighbours['next'])
                <a class="pager-next" href="{{ route('album', $neighbours['next']['slug']) }}">
                    <span>Suivant →</span><strong>{{ $neighbours['next']['display'] }}</strong>
                </a>
            @else <span></span> @endif
        </nav>
    </main>

    <div class="lightbox" id="lightbox" hidden>
        <button class="lb-close" aria-label="Fermer">✕</button>
        <button class="lb-play" aria-label="Diaporama" title="Diaporama (Espace)"></button>
        <button class="lb-prev" aria-label="Précédent">‹</button>
        <img class="lb-img" src="" alt="">
        <button class="lb-next" aria-label="Suivant">›</button>
        <div class="lb-counter"></div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/lightbox.js') }}"></script>
@endpush