@extends('layouts.public')

@section('title', $item->seoTitle())
@section('meta_description', $item->seoDescription())
@section('meta_image', $item->seoImage())
@section('meta_keywords', $item->seoKeywords())
@section('og_type', 'article')

@push('structured-data')
    <script type="application/ld+json">
        {!! ld_json([
            '@context' => 'https://schema.org',
            '@type' => $item->type === 'event' ? 'Event' : 'NewsArticle',
            'headline' => $item->title,
            'description' => $item->seoDescription(),
            'image' => $item->seoImage() ?: null,
            'datePublished' => $item->published_at?->toDateString(),
            'startDate' => $item->event_date?->toDateString(),
            'author' => $item->author ? ['@type' => 'Organization', 'name' => $item->author] : null,
        ]) !!}
    </script>
@endpush

@section('content')
    <x-page-hero :eyebrow="$item->typeLabel()"
                 :title="$item->title"
                 :subtitle="$item->tagline"
                 :image="image_url($item->thumbnail)"
                 :breadcrumbs="[__('Media') => route('media.index'), $item->title => null]" />

    <article class="section">
        <div class="container-page grid gap-14 lg:grid-cols-12">
            <div class="min-w-0 lg:col-span-8" x-data="lightbox">
                <div class="mb-8 flex flex-wrap items-center gap-x-6 gap-y-3">
                    @if ($item->published_at)
                        <span class="inline-flex items-center gap-2 text-sm text-text-secondary">
                            <x-icon name="calendar" class="size-4 text-text-muted" />
                            <time datetime="{{ $item->published_at->toDateString() }}">{{ $item->published_at->format('d M Y') }}</time>
                        </span>
                    @endif

                    @if ($item->author)
                        <span class="inline-flex items-center gap-2 text-sm text-text-secondary">
                            <x-icon name="user" class="size-4 text-text-muted" /> {{ $item->author }}
                        </span>
                    @endif

                    @if ($item->sector)
                        <a href="{{ route('sectors.show', $item->sector) }}" class="pill-brand">{{ $item->sector->name }}</a>
                    @endif
                </div>

                @if ($item->thumbnail)
                    <x-image :src="$item->thumbnail" :alt="$item->title" ratio="16/9" :thumb="false" eager
                             class="mb-10" data-mask-reveal />
                @endif

                @if ($item->short_description)
                    <p class="prose-measure font-display text-xl leading-relaxed text-text">{{ $item->short_description }}</p>
                @endif

                @if ($item->content)
                    <div class="prose-content mt-8">{!! $item->content !!}</div>
                @endif

                @if ($item->images->isNotEmpty())
                    <section class="mt-12">
                        <h2 class="mb-6 font-display text-title font-bold text-text">{{ __('Gallery') }}</h2>

                        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                            @foreach ($item->images as $index => $image)
                                <button type="button"
                                        @click="show({{ Js::from($item->images->map(fn ($i) => ['src' => image_url($i->path), 'caption' => $i->caption])) }}, {{ $index }})"
                                        class="group aspect-4/3 overflow-hidden rounded-xl bg-surface-muted">
                                    <img src="{{ thumb_url($image->path) }}" alt="{{ $image->caption ?: $item->title }}"
                                         loading="lazy" decoding="async"
                                         class="size-full object-cover transition duration-700 group-hover:scale-105">
                                </button>
                            @endforeach
                        </div>

                        @include('public.partials.lightbox')
                    </section>
                @endif

                <div class="mt-10 flex flex-wrap gap-3">
                    @if ($item->attachment)
                        <x-button :href="asset_path($item->attachment)" target="_blank" rel="noopener">
                            <x-icon name="download" class="size-4" /> {{ __('Download attachment') }}
                        </x-button>
                    @endif

                    @if ($item->external_link)
                        <x-button variant="outline" :href="$item->external_link" target="_blank" rel="noopener">
                            <x-icon name="external" class="size-4" /> {{ __('External link') }}
                        </x-button>
                    @endif
                </div>

                @if (filled($item->tags))
                    <ul class="mt-8 flex flex-wrap gap-2 border-t border-border pt-6">
                        @foreach ($item->tags as $tag)
                            <li><x-badge>#{{ $tag }}</x-badge></li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <aside class="lg:col-span-4">
                <div class="space-y-5 lg:sticky lg:top-28">
                    @if ($item->type === 'event' && ($item->event_date || $item->event_venue))
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Event details') }}</p>

                            @if ($item->event_date)
                                <p class="flex items-center gap-2.5 text-sm text-text">
                                    <x-icon name="calendar" class="size-4 text-primary" />
                                    {{ $item->event_date->format('d M Y') }}
                                </p>
                            @endif

                            @if ($item->event_venue)
                                <p class="mt-2.5 flex items-center gap-2.5 text-sm text-text">
                                    <x-icon name="map" class="size-4 text-primary" /> {{ $item->event_venue }}
                                </p>
                            @endif
                        </div>
                    @endif

                    @if ($related->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('More :type', ['type' => Str::plural(Str::lower($item->typeLabel()))]) }}</p>

                            <ul class="space-y-4">
                                @foreach ($related as $other)
                                    <li>
                                        <a href="{{ route('media.show', $other) }}" class="group block">
                                            <p class="text-sm font-medium text-text transition group-hover:text-text-brand">{{ $other->title }}</p>
                                            @if ($other->published_at)
                                                <p class="meta-label mt-1">{{ $other->published_at->format('d M Y') }}</p>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="panel bg-primary-50">
                        <p class="font-display text-base font-semibold text-primary">{{ __('Stay informed') }}</p>
                        <p class="mt-2 text-sm text-text-secondary">
                            {{ __('Notices, publications and vacancies, sent as they are published.') }}
                        </p>
                        <x-button variant="outline" :href="route('media.index')" class="mt-4 w-full">
                            {{ __('All updates') }}
                        </x-button>
                    </div>
                </div>
            </aside>
        </div>
    </article>
@endsection