@props(['novidade'])
@php
    use \App\Helpers\TranslationHelper;
    $alternates = [];
    $slugJson = json_decode($novidade->getRawOriginal('slug'), true);

    foreach($slugJson as $locale => $value){
        $lang = str_replace('_', '-', $locale);
        $alternates[] = [
            'locale' => $locale,
            'lang' => $lang,
            'href' => TranslationHelper::getNovidadeUrl($value, $locale, true),
        ];
    };
    $canonical = TranslationHelper::getNovidadeUrl($novidade->slug);
@endphp
<x-layout
    :title="$novidade->meta_title"
    :description="$novidade->meta_description"
    :canonical="$canonical"
    :alternates="$alternates"
>
    @push('scripts')
        <meta property="og:title" content="{{ $novidade->meta_title ?? $novidade->titulo }}">
        <meta property="og:description" content="{{ $novidade->meta_description }}">
        <meta property="og:image" content="{{ asset('storage/' . $novidade->thumbnail) }}">
        <meta property="og:url" content="{{ $canonical }}">
        <meta property="og:type" content="article">
    @endpush
    <x-vitrine-simples class="py-32 sm:py-10">
        <div class="text-center pt-4">
            <div class="m-0 text-white tracking-[0.5em] uppercase font-main text-xs sm:text-base">
                {{ $novidade->categoria->nome }}
            </div>
            <h1 class="px-5 sm:px-0 font-extrabold text-balance text-[2rem] mx-auto leading-tight sm:leading-none my-3 text-white sm:text-[3rem] font-main max-w-[50rem] text-center">
                {{ $novidade->titulo }}
            </h1>
        </div>
        @if ($novidade->autor)
            <div class="flex gap-4 text-white mx-auto items-center text-center justify-center mt-8">
                <div class="w-[60px] h-[60px] border-brand-yellow border border-solid rounded-full overflow-hidden">
                    @if($novidade->autor->profile_picture)
                        <img alt="{{ $novidade->autor->name }}" src="{{ asset("storage/" . $novidade->autor->profile_picture) }}"
                             class="aspect-square h-full w-full">
                    @else
                        <div
                            class="bg-brand-yellow aspect-square h-full w-full text-brand-brown uppercase text-[30px] font-medium flex items-center justify-center">
                            {{ substr($novidade->autor->name, 0, 2) }}
                        </div>
                    @endif
                </div>
                <div>
                    {{ __('messages._pagina_novidades.por', ['name' => $novidade->autor->name]) }}
                    , {{ \Carbon\Carbon::parse($novidade->data_publicacao)->timezone('America/Sao_Paulo')->translatedFormat(__('messages._pagina_novidades.date_format')) }}
                </div>
            </div>
        @endif

        <x-slot name="slot2">
            <div class="absolute inset-0 top-[5rem] hidden md:block">
                <x-star class="absolute left-[10%] top-[18%]" width="48px" height="48px"
                        color="yellow"/>
                <x-star class="absolute right-[10%] top-[20%]" width="24px" height="24px"
                        color="yellow"/>
                <x-star class="absolute right-[12%] top-[36%]" width="54px" height="54px"
                        color="aquamarine"/>
            </div>
            <div class="absolute inset-0 top-[5rem] md:hidden">
                <x-star class="absolute left-[10%] top-[-3rem]" width="48px" height="48px"
                        color="aquamarine"/>
                <x-star class="absolute right-[15%] bottom-[1.5rem]" width="54px" height="54px"
                        color="yellow"/>
            </div>
        </x-slot>
    </x-vitrine-simples>
    <x-corpo>
        <main class="start-conteudo px-8 sm:px-16 leading-8 mb-0 mt-5 text-base text-brand-brown">
            {!! str(tiptap_converter()->asHTML(\App\Helpers\TranslationHelper::getTranslationDeep('conteudo', $novidade)))->sanitizeHtml() !!}
        </main>
        <aside>
            <div class="text-center box-content px-8 sm:px-16 mt-16">
                <h3 class="mb-2 font-extrabold text-brand-brown">{{ __('messages._pagina_novidades.compartilhe') }}</h3>
                <x-compartilhe modo="compartilhar"/>
                <hr class="border-brand-brown my-16"/>
            </div>
            <div class="max-w-lg box-content px-8 sm:px-16 mx-auto">
                <div
                    class="text-brand-brown text-xs tracking-36 uppercase text-center">{{ __('messages._pagina_novidades.noticias_relacionadas') }}</div>
                <h3 class="mb-10 font-main font-extrabold mx-4 sm:mx-auto relative text-center
                text-brand-brown text-13xl sm:text-33xl text-balance leading-none">
                    {{ __('messages._pagina_novidades.o_que_ha_de_novo') }}
                </h3>
            </div>
            @if(!$relacionadas->isEmpty())
                <x-galeria-grande
                    :cartoes="$relacionadas->map(fn ($item) => [
                    'url' => TranslationHelper::getNovidadeUrl($item->slug),
                    'imagem' => $item['thumbnail'],
                    'titulo' => $item['titulo'],
                    'sobrancelha' => $item['categoria']['nome']
                ])"/>
            @else
                <x-ultimas-novidades/>
            @endif
        </aside>
    </x-corpo>
</x-layout>