@extends('layouts.app_web')  <!-- Hereda el layout base -->
@section('content')
<div id="wrapper" class="wrap overflow-hidden-x">
    @include('layouts.navigation_web')

    <div class="section py-3 sm:py-6 lg:py-9">
        <div class="container max-w-xl">
            <div class="panel vstack gap-3 sm:gap-6 lg:gap-9">
                <header class="page-header vstack justify-center items-center text-center max-w-500px mx-auto">
                    <h1 class="h4 lg:h1">{{$navigation}}</h1>
                    <p class="fs-6 lg:fs-5 opacity-60">📝 Explora nuestros posts y sumérgete en contenido que te atrapará desde el primer momento. 🚀</p>
                </header>
                <div class="vstack sm:hstack justify-between items-center gap-2 sm:gap-4">
                    <div class="panel text-center sm:text-start">
                        <span class="fs-6 m-0 opacity-60">Mostrando {{count($posts)}} publicaciones.</span>
                    </div>
                    <div>
                        <form method="GET" action="{{ route('home.searchposts') }}">

                        <div class="hstack gap-1 fs-6">
                            <span>Filtrar:</span>
                            <input type="text" name="search" class="form-control form-control-xs fs-6 w-150px " placeholder="Buscar..." value="{{ request('search') }}">
                            <button type="submit" class="btn btn-xs sm:btn-sm lg:btn-md btn-alt-dark text-nowrap w-100 dark:hover:bg-gray-500" name="update_cart" value="Update cart">🔍</button>
                        </div>
                    </form>

                    </div>
                </div>
              
                <div class="row g-4 xl:g-8">
                    <div class="col">
                        <div class="panel text-center">
                            <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 xl:child-cols-3 col-match gy-4 xl:gy-6 gx-2 sm:gx-4">
                                @foreach ($posts as $post)
                                <div>
                                    <article class="post type-post panel vstack gap-2">
                                        <div class="post-image panel overflow-hidden">
                                            <figure class="featured-image m-0 ratio ratio-16x9 rounded uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800">
                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                <a href="{{route('home.post',$post->slug)}}" class="position-cover" data-caption="The Rise of AI-Powered Personal Assistants: How They Manage"></a>
                                            </figure>
                                            {{-- ESTO LO USAMOS EN LOS POSTS  --}}
                                            <div class="post-category hstack gap-narrow position-absolute top-0 start-0 m-1 fs-7 fw-bold h-24px px-1 rounded-1 shadow-xs bg-white text-primary">
                                                <a class="text-none" href="{{route('home.category',$post->category_id)}}">{{$post->category->name}}</a>
                                            </div>
                                            <div class="position-absolute top-0 end-0 w-150px h-150px rounded-top-end bg-gradient-45 from-transparent via-transparent to-black opacity-50"></div>
                                            <span class="cstack position-absolute top-0 end-0 fs-6 w-40px h-40px text-white">
                                                {{-- <i class="icon-narrow unicon-play-filled-alt"></i> --}}
                                            </span>
                                        </div>
                                        <div class="post-header panel vstack gap-1 lg:gap-2">
                                            <h3 class="post-title h6 sm:h5 m-0 text-truncate-2 m-0">
                                                <a class="text-none" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                            </h3>
                                        </div>
                                    </article>
                                </div>
                                @endforeach
                            </div>
                            {{-- <div class="nav-pagination pt-3 mt-6 lg:mt-9 border-top border-gray-100 dark:border-gray-800">
                                <ul class="nav-x uc-pagination hstack gap-1 justify-center ft-secondary" data-uc-margin="">
                                    <li>
                                        <a href="blog-4cols.html#"><span class="icon icon-1 unicon-chevron-left"></span></a>
                                    </li>
                                    <li><a href="blog-4cols.html#">1</a></li>
                                    <li><a href="blog-4cols.html#" class="uc-active">2</a></li>
                                    <li><a href="blog-4cols.html#">3</a></li>
                                    <li class="uc-disabled"><span>…</span></li>
                                    <li><a href="blog-4cols.html#">8</a></li>
                                    <li><a href="blog-4cols.html#">9</a></li>
                                    <li>
                                        <a href="blog-4cols.html#"><span class="icon icon-1 unicon-chevron-right"></span></a>
                                    </li>
                                </ul>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Newsletter -->
</div>
@endsection