portfolio-show.blade.php

@extends('layouts.public', [
    'title' => $creation->nameTranslationKey->getTranslation(),
    'description' => $creation->shortDescriptionTranslationKey->getTranslation(),
    'image' => $creation->coverUploadedPicture
])

@section('content')
    <x-public.navbar class="container mx-auto px-4"/>
    <div class="container mx-auto px-4 py-24 flex flex-col lg:flex-row gap-16">
        <div class="max-w-md shrink-0">
            <img class="w-full h-auto rounded-2xl" src="{{ $creation->coverUploadedPicture->getMediumSizeUrl() }}"
                 alt="{{ $creation->nameTranslationKey->getTranslation() }}" loading="eager"/>
        </div>
        <div class="flex flex-col gap-4 lg:grow">
            <div>
                <x-public.button :variant="$creation->category->color" tag="a" name="{{ $creation->category->slug }}"
                                 :href="route('portfolio', ['category_id' => $creation->category->id])">
                    {{ $creation->category->nameTranslationKey->getTranslation() }}
                </x-public.button>
            </div>
            <h1 class="text-5xl xl:text-6xl">
                {{ $creation->nameTranslationKey->getTranslation() }}
            </h1>

            @if (!empty($creation->completion_date_start))
                <p class="text-xl text-gray-600">
                    {{ __('generic.completed_in') }} {{ $creation->completion_date_start }}
                    @if (!empty($creation->completion_date_end))
                        - {{ $creation->completion_date_end }}
                    @endif
                </p>
            @endif

            @if(!empty($creation->tags))
                <div class="flex flex-wrap gap-2">
                    @foreach(Str::of($creation->tags)->explode(',') as $tag)
                        <x-public.badge variant="light">{{ $tag }}</x-public.badge>
                    @endforeach
                </div>
            @endif

            <x-markdown class="markdown">
                {{ $creation->descriptionTranslationKey->getTranslation() }}
            </x-markdown>
        </div>
    </div>

    <section class="container mx-auto px-4 pb-24">
        <h2 class="text-3xl xl:text-4xl mb-4">Médias</h2>
        <div id="medias" class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            @foreach($creation->creationPictures as $picture)
                <a href="{{ $picture->getFullsizeUrl() }}"
                   data-pswp-width="{{ $picture->width }}"
                   data-pswp-height="{{ $picture->height }}"
                   target="_blank"
                   class="relative w-full aspect-square rounded-2xl shrink-0 overflow-hidden focus:outline-none focus:ring-2 focus:ring-pink-normal">
                    <img class="w-full h-full object-cover" src="{{ $picture->getMediumSizeUrl() }}"
                         alt="{{ $creation->nameTranslationKey->getTranslation() }}" loading="lazy"/>

                    <!-- Overlay -->
                    <div class="absolute inset-0 bg-black/50 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
                        <div class="text-white">
                            <x-font-awesome icon="expand" height="2rem" class="fill-white"/>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

    <x-public.footer/>
@endsection

@pushonce('scripts')
    @vite('resources/js/pages/public/portfolio-page.js')
@endpushonce