@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
        :sobrancelha="$novidade->categoria->nome"
        :titulo="$novidade->titulo">

        <div class="absolute inset-0 top-[5rem]">
            <x-star class="absolute left-[10%] top-[10%] md:left-[10%] md:top-[18%]" width="48px" height="48px"
                    color="white"/>
            <x-star class="absolute right-[6%] top-[48%] md:right-[10%] md:top-[20%]" width="24px" height="24px"
                    color="white"/>
            <x-star class="absolute right-[15%] top-[60%] md:right-[12%] md:top-[36%]" width="54px" height="54px"
                    color="yellow"/>
        </div>

        @if ($novidade->autor)
            <x-slot name="aposTitulo">
                <div class="flex gap-4 text-white mx-auto items-center">
                    <div class="w-[60px] h-[60px] border-white border border-solid rounded-full overflow-hidden">
                        @if($novidade->autor->profile_picture)
                            <img src="{{ asset("storage/" . $novidade->autor->profile_picture) }}"
                                 class="aspect-square h-full w-full">
                        @else
                            <div
                                class="bg-blue-100 aspect-square h-full w-full text-darkslateblue-200 uppercase text-[30px] font-medium flex items-center justify-center">
                                {{ substr($novidade->autor->name, 0, 2) }}
                            </div>
                        @endif
                    </div>
                    <div>
                        Por {{ $novidade->autor->name }}
                        , {{ \Carbon\Carbon::parse($novidade->data_publicacao)->timezone('America/Sao_Paulo')->format('d/m/Y') }}
                    </div>
                </div>
            </x-slot>
        @endif
    </x-vitrine>
    <x-corpo>
        <main class="start-conteudo px-8 sm:px-16 leading-8 mb-0 mt-5 text-base text-darkslateblue-300">
            {!! tiptap_converter()->asHTML($novidade->conteudo) !!}
        </main>
        <aside>
            <div class="text-center box-content px-8 sm:px-16 mt-16">
                <h3 class="mb-2 font-bold text-midnightblue-100">{{ __('messages._pagina_novidades.compartilhe') }}</h3>
                <x-compartilhe modo="compartilhar"/>
                <hr class="border-midnightblue-100 my-16"/>
            </div>
                <div class="max-w-lg box-content px-8 sm:px-16 mx-auto">
                    <div
                        class="text-midnightblue-100 text-xs tracking-36 uppercase text-center">{{ __('messages._pagina_novidades.noticias_relacionadas') }}</div>
                    <h3 class="mb-10 font-bricolage font-bold mx-4 sm:mx-auto relative text-center
                text-midnightblue-100 text-13xl sm:text-33xl text-balance">
                        {{ __('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>