@extends('layouts.nova')

@push('head')
    <title>{{ $meta['title'] }}</title>
    <meta name="description" content="{{ $meta['description'] }}">
    <link rel="canonical" href="{{ $meta['canonical'] }}">

    <meta property="og:type" content="article">
    <meta property="og:site_name" content="Skinbase">
    <meta property="og:title" content="{{ $meta['title'] }}">
    <meta property="og:description" content="{{ $meta['description'] }}">
    <meta property="og:url" content="{{ $meta['canonical'] }}">
    @if(!empty($meta['og_image']))
        <meta property="og:image" content="{{ $meta['og_image'] }}">
        <meta property="og:image:type" content="image/webp">
        @if(!empty($meta['og_width']))
            <meta property="og:image:width" content="{{ $meta['og_width'] }}">
        @endif
        @if(!empty($meta['og_height']))
            <meta property="og:image:height" content="{{ $meta['og_height'] }}">
        @endif
    @endif

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $meta['title'] }}">
    <meta name="twitter:description" content="{{ $meta['description'] }}">
    @if(!empty($meta['og_image']))
        <meta name="twitter:image" content="{{ $meta['og_image'] }}">
    @endif

    @php
        $authorName = $artwork->user?->name ?: $artwork->user?->username ?: null;
        $keywords = $artwork->tags->pluck('name')->merge($artwork->categories->pluck('name'))->filter()->unique()->implode(', ');
        $license = $artwork->license_url ?? null;

        $imageObject = [
            '@context' => 'https://schema.org',
            '@type' => 'ImageObject',
            'name' => (string) $artwork->title,
            'description' => (string) ($artwork->description ?? ''),
            'url' => $meta['canonical'],
            'contentUrl' => $meta['og_image'] ?? null,
            'thumbnailUrl' => $presentMd['url'] ?? ($meta['og_image'] ?? null),
            'encodingFormat' => 'image/webp',
            'width' => !empty($meta['og_width']) ? (int) $meta['og_width'] : null,
            'height' => !empty($meta['og_height']) ? (int) $meta['og_height'] : null,
            'author' => $authorName ? ['@type' => 'Person', 'name' => $authorName] : null,
            'datePublished' => optional($artwork->published_at)->toAtomString(),
            'license' => $license,
            'keywords' => $keywords !== '' ? $keywords : null,
        ];

        $creativeWork = [
            '@context' => 'https://schema.org',
            '@type' => 'CreativeWork',
            'name' => (string) $artwork->title,
            'description' => (string) ($artwork->description ?? ''),
            'url' => $meta['canonical'],
            'author' => $authorName ? ['@type' => 'Person', 'name' => $authorName] : null,
            'datePublished' => optional($artwork->published_at)->toAtomString(),
            'license' => $license,
            'keywords' => $keywords !== '' ? $keywords : null,
            'image' => $meta['og_image'] ?? null,
        ];

        $imageObject = array_filter($imageObject, static fn ($value) => $value !== null && $value !== '');
        $creativeWork = array_filter($creativeWork, static fn ($value) => $value !== null && $value !== '');

        $preloadSrcset = ($presentMd['url'] ?? '') . ' 640w, ' . ($presentLg['url'] ?? '') . ' 1280w, ' . ($presentXl['url'] ?? '') . ' 1920w';
    @endphp

    @if(!empty($presentLg['url']))
        <link rel="preload" as="image"
              href="{{ $presentLg['url'] }}"
              imagesrcset="{{ trim($preloadSrcset) }}"
              imagesizes="(min-width: 1280px) 1200px, (min-width: 768px) 90vw, 100vw">
    @endif

    <script type="application/ld+json">{!! json_encode($imageObject, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
    <script type="application/ld+json">{!! json_encode($creativeWork, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
@endpush

@section('content')
    <div id="artwork-page"
         data-artwork='@json($artworkData)'
         data-related='@json($relatedItems)'
         data-present-md='@json($presentMd)'
         data-present-lg='@json($presentLg)'
         data-present-xl='@json($presentXl)'
         data-present-sq='@json($presentSq)'
         data-cdn='@json(rtrim((string) config("cdn.files_url", "https://files.skinbase.org"), "/"))'
         data-canonical='@json($meta["canonical"])'
         data-comments='@json($comments)'
         data-is-authenticated='@json(auth()->check())'>
    </div>

    @vite(['resources/js/Pages/ArtworkPage.jsx'])
@endsection
