<div>
    <section class="pt-0 cover-background ipad-top-space-margin sm-pb-0"
        style="background-image:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
      url('https://images.pexels.com/photos/4050291/pexels-photo-4050291.jpeg');">
        <div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
            <svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
                <path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
                    <animate attributeName="d" dur="5s"
                        values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
                        repeatCount="indefinite" />
                </path>
            </svg>
        </div>
        <div class="container">
            <div class="row align-items-center justify-content-center h-500px sm-h-300px">
                <div class="col-12 col-lg-6 col-md-10 position-relative text-center page-title-extra-large d-flex flex-wrap flex-column align-items-center justify-content-center"
                    data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px pt-5px pb-5px mb-15px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex"><i
                            class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span>
                    <h5 class="mb-20px text-white fw-600 ls-minus-1px">{{ $pageDescription }}</h5>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-0 right-side-bar">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
                    @forelse($news as $item)
                        <!-- start blog item -->
                        <div class="col-12 mb-40px" wire:key="news-{{ $item->id }}">
                            <div class="card border-0 no-border-radius box-shadow-extra-large">
                                @if ($item->thumbnail)
                                    <div class="blog-image">
                                        <a href="{{ route('news.show', $item->slug) }}">
                                            <img src="{{ $item->thumbnail }}" alt="{{ $item->title }}"
                                                class="w-100" />
                                        </a>
                                        <div class="blog-categories">
                                            @foreach ($item->categories as $itemCategory)
                                                <a href="javascript:void(0)"
                                                    wire:click="$set('category', '{{ $itemCategory->id }}')"
                                                    class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-600">{{ $itemCategory->name }}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                <div class="card-body p-9 bg-white">
                                    <div class="entry-meta mb-20px fs-15">
                                        <span><i class="feather icon-feather-calendar"></i><a
                                                href="javascript:void(0)">{{ $item->formatted_date }}</a></span>
                                        <span><i class="feather icon-feather-user"></i><a
                                                href="javascript:void(0)">{{ $item->author_name }}</a></span>
                                        <span><i class="feather icon-feather-eye"></i><a
                                                href="javascript:void(0)">{{ $item->formatted_views }}</a></span>
                                    </div>
                                    <a href="{{ route('news.show', $item->slug) }}"
                                        class="text-dark-gray card-title mb-20px fw-600 fs-24 d-block">{{ $item->title }}</a>
                                    <p class="text-medium-gray mb-20px">
                                        {{ $item->excerpt }}
                                    </p>
                                    <a href="{{ route('news.show', $item->slug) }}"
                                        class="btn btn-link btn-large text-base-color fw-600">Teruskan Membaca<span
                                            class="bg-base-color"></span></a>
                                </div>
                            </div>
                        </div>
                        <!-- end blog item -->
                    @empty
                        <div class="col-12 text-center">
                            <p>Tidak ada berita ditemukan.</p>
                        </div>
                    @endforelse

                    <div class="col-12 mt-8 d-flex justify-content-center">
                        {{ $news->links('livewire.home.custom-pagination') }}
                    </div>
                </div>
                <!-- start sidebar -->
                <aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
                    <div class="mb-15 md-mb-50px xs-mb-35px">
                        <div
                            class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
                            Cari</div>
                        <div class="position-relative">
                            <input class="form-control" type="text" wire:model.live.debounce.300ms="search"
                                placeholder="Cari berita...">
                            <button class="bg-transparent border-0 position-absolute right-15px top-10px"
                                type="submit"><i class="feather icon-feather-search"></i></button>
                        </div>
                    </div>

                    <div class="mb-15 md-mb-50px xs-mb-35px">
                        <div
                            class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
                            Berita Terpopuler</div>
                        <ul class="popular-post-sidebar position-relative">
                            @foreach ($popularPosts as $post)
                                <li class="d-flex align-items-start">
                                    @if ($post->thumbnail)
                                        <figure>
                                            <a href="{{ route('news.show', $post->slug) }}">
                                                <img src="{{ $post->thumbnail }}" alt="image" class="w-100">
                                            </a>
                                        </figure>
                                    @endif
                                    <div class="col media-body">
                                        <a href="{{ route('news.show', $post->slug) }}"
                                            class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">{{ $post->title }}</a>
                                        <div><a href="javascript:void(0)"
                                                class="d-inline-block fs-15">{{ $post->formatted_date }}</a>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="mb-15 md-mb-50px xs-mb-35px">
                        <div
                            class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
                            Kategori</div>
                        <ul class="category-list-sidebar position-relative list-unstyled">
                            <li class="mb-10px">
                                <a href="javascript:void(0)" wire:click="$set('category', '')"
                                    class="d-flex align-items-center {{ $this->category == '' ? 'text-base-color fw-600' : 'text-dark-gray' }}">
                                    <span>Semua Kategori</span>
                                </a>
                            </li>
                            @foreach ($categories as $cat)
                                <li class="mb-10px border-bottom border-color-extra-light-gray pb-10px">
                                    <a href="javascript:void(0)" wire:click="$set('category', '{{ $cat->id }}')"
                                        class="d-flex align-items-center justify-content-between {{ $this->category == $cat->id ? 'text-base-color fw-600' : 'text-dark-gray' }}">
                                        <span>{{ $cat->name }}</span>
                                        <span class="fs-14 text-medium-gray">({{ $cat->news_count }})</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    @if ($tags->count() > 0)
                        <div class="mb-15 md-mb-50px xs-mb-35px">
                            <div
                                class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
                                Tags</div>
                            <div class="tag-cloud">
                                @foreach ($tags as $item)
                                    <a href="javascript:void(0)" wire:click="$set('tag', '{{ $item->name }}')"
                                        class="{{ $tag == $item->name ? 'bg-base-color text-white' : '' }}">{{ $item->name }}</a>
                                @endforeach
                                @if ($tag)
                                    <a href="javascript:void(0)" wire:click="$set('tag', '')"
                                        class="bg-dark-gray text-white">Reset Tag</a>
                                @endif
                            </div>
                        </div>
                    @endif
                </aside>
                <!-- end sidebar -->
            </div>
        </div>
    </section>
</div>
