@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp
@section('title', setting('site.title') . ' | Noticias ')
<div>
    <section id="noticias" class=" p-footer bg-[#fff4e6]">

        <div class="absolute w-[99vw] h-[99vh] z-0">
            <video class="w-[99vw] h-[99vh] object-cover absolute top-0 left-0 z-0" autoplay loop muted playsinline>
                <source src="{{ Vite::asset('resources/images/media/BACK_Amarillo.mp4') }}" type="video/mp4">
            </video>
            <div class="absolute bottom-0 h-28 px-5 bg-[#fff4e6] z-10 w-full"></div>
        </div>
        <div class="container mx-auto px-14 relative z-30">
            <div class="h-12"></div>
            <h1 class="text-6xl md:text-6xl text-principal font-font3 py-4 letter-spacing-[9px] display-inline-block text-center">- Blog de Noticias -</h1>
            <div class="h-12"></div>
            {{-- Menú de filtros --}}
            <div class="flex flex-wrap justify-center gap-16 mb-12">

                {{-- TODOS --}}
                <button
                    wire:click="filterByTopic"
                    class="uppercase tracking-widest text-xl transition
                        {{ !$topicSlug ? 'text-principal' : 'text-aqua' }}"
                >
                    Todos
                </button>

                @foreach($topics as $t)
                    <button
                        wire:click="filterByTopic('{{ $t->slug }}')"
                        class="uppercase tracking-widest text-xl transition
                            {{ $topicSlug === $t->slug
                                ? 'text-principal'
                                : 'text-aqua hover:text-principal' }}"
                    >
                        {{ $t->name }}
                    </button>
                @endforeach
            </div>
            <div class="h-12"></div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
                @if ($noticias->count())
                    @foreach ($noticias as $noticia)
                        <a
                            href="{{ route('noticias.show', $noticia->slug) }}"
                            class="group relative text-left"
                        >

                            {{-- Imagen --}}
                            <div class="overflow-hidden ">
                                @php
                                    $img = $noticia->image_list ?: $noticia->image;
                                @endphp

                                @if ($img)
                                    <img
                                        src="{{ asset('storage/' . $img) }}"
                                        alt="{{ $noticia->title }}"
                                        class=" transition-transform duration-500 ease-in-out group-hover:scale-110 w-full"
                                    >
                                @endif
                            </div>

                            {{-- Contenido --}}
                            <div class="text-black">

                                {{-- Badge flotante del topic --}}
                                @if($noticia->topic)
                                    <span
                                        class="text-lg px-3 py-1 text-white absolute top-5 left-5 "
                                        style="background-color: {{ $noticia->topic->color }};"
                                    >
                                        {{ $noticia->topic->name }}
                                    </span>
                                @endif

                                <div class="h-5"></div>

                                <p class="text-lg text-principal pb-3 font-bold leading-6">
                                    {{ $noticia->title }}
                                </p>

                                <p class="text-lg text-[#d3523f]">
                                    {!! $noticia->description !!}
                                </p>

                                <div class="h-12"></div>

                                <span class="text-principal text-base font-bold border-principal border-2 px-3 py-2">
                                    Ver más
                                </span>
                            </div>
                        </a>
                    @endforeach
                @endif
            </div>
            {{ $noticias->links() }}
            <div class="h-20"></div>
        </div>
    </section>
</div>