@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 nuestras categorías y descubre contenido interesante en cada tema.</p>
                </header>
                <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 ($categories as $category)
                                <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/categories/category_'.$category->id."/".$category->image) }}" data-src="{{ asset('imagenes/categories/category_'.$category->id."/".$category->image) }}" alt="{{$category->name}}" data-uc-img="loading: lazy">
                                                <a href="{{route('home.category',$category->id)}}" 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="blog-category.html">Gadgets</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.category',$category->id)}}">{{$category->name}}</a>
                                            </h3>
                                            <div>
                                                <div class="post-meta panel hstack justify-center fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                    <div class="meta">
                                                        <div class="hstack gap-2">
                                                            {{-- <div>
                                                                <div class="post-author hstack gap-1">
                                                                    <a href="https://html.themewant.com/news5/demo-three/page-author.html" data-uc-tooltip="David Peterson"><img src="../assets/images/avatars/01.png" alt="David Peterson" class="w-24px h-24px rounded-circle"></a>
                                                                    <a href="https://html.themewant.com/news5/demo-three/page-author.html" class="text-black dark:text-white text-none fw-bold">David Peterson</a>
                                                                </div>
                                                            </div> --}}
                                                            <div>
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>Publicaciones asociadas</span>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <a href="blog-4cols.html#post_comment" class="post-comments text-none hstack gap-narrow">
                                                                    <i class="icon-narrow unicon-chat"></i>
                                                                    <span>{{count($category->posts)}}</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="actions">
                                                        <div class="hstack gap-1"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </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