@section styles {
        <link rel="stylesheet" href="/css/landing-page.css">
    }

    <div class="container mt-3 mt-md-4">
        <div class="row">
            <div class="col-12 col-md-7">
                <h2 class="mb-2 fw-bold">Berita Terkini</h2>
                <div id="berita-carousel" class="owl-carousel owl-theme nav-inside dots-modern" data-plugin-options=""></div>
            </div>
            <div class="col-12 col-md-5">
                <h2 class="mb-2 fs-4 fw-bold">Kualitas Udara Jakarta Hari Ini</h2>
                <div id="ispu"></div>
                <div id="ispu-container" class="row align-items-stretch text-center mx-1 mx-md-0 rounded-4"
                    style="min-height: 70px">
                    <div class="col-2 position-relative d-flex align-items-center justify-content-center fs-1"
                        style="border-radius: 1rem 0 0 1rem">
                        <span id="ispu-icons"></span>
                        <a href="#" class="position-absolute text-light" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" style="bottom: 0px; right: 8px; font-size: .7rem"><i
                                class="fa-solid fa-circle-info"></i></a>
                    </div>
                    <div class="col-7 col-md-7 d-flex align-items-center justify-content-center flex-column fw-bold text-capitalize py-2 pb-3"
                        style="line-height: 1.8rem; font-size: 1.2rem">
                        <span id="ispu-status"></span>
                        <div style="font-size: .8rem;"
                            class="bg-white px-2 py-1 rounded-2 fw-semibold d-flex align-items-center mt-1">
                            <i class="fa-solid fa-location-dot"></i>
                            <select class="bg-transparent fw-semibold border-0" style="font-size: .7rem;" name="lokasi"
                                id="lokasi">
                                <option>Data tidak ditemukan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-3 col-md-3 position-relative d-flex flex-column align-items-center justify-content-center line-height-3"
                        style="border-radius: 0 1rem 1rem 0">
                        <span id="ispu-value" class="fw-semibold" style="font-size: 1.5rem;"></span>
                        <span class="fw-bolder" style="font-size: .55rem;">PM2.5 | 33.8 µg/m³</span>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <p class="fw-semibold text-muted" style="font-size: .75rem;">Diperbarui: <span
                            id="time-ispu-update"></span> 08-12-2023 13.00</p>
                    <a href="https://silika.jakarta.go.id/udara/ispu24" class="fw-semibold text-decoration-underline"
                        target="_blank" style="font-size: .75rem;">Lihat Detail</a>
                </div>

                <div class="d-flex justify-content-center flex-wrap gap-2 mt-2 d-none" style="font-size: 1rem;">
                    <span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(1)">Lb. Buaya</span>
                    <span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(2)">Klp. Gading</span>
                    <span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(3)">Kb. Jeruk</span>
                    <span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(4)">Bundaran HI</span>
                    <span class="badge bg-dark cur-pointer" onclick="temp_assign_ispu(5)">Jagakarsa</span>
                </div>

                <div class="row mb-3">
                    <div class="col-12">
                        <a href="https://jakartasatu.jakarta.go.id/portal/apps/sites/#/dinas-lingkungan-hidup" class="text-decoration-none" target="_blank">
                            <div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
                                style="background: #8ACDD7; min-height: 70px">
                                Cek Lokasi Bank Sampah
                            </div>
                        </a>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-12">
                        <a href="https://silika.jakarta.go.id/tps_neraca" class="text-decoration-none" target="_blank">
                            <div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
                                style="background: #FF8F8F; min-height: 70px">
                                Cek Lokasi TPS
                            </div>
                        </a>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-12">
                        <a href="https://silika.jakarta.go.id/lps" class="text-decoration-none" target="_blank">
                            <div class="card border-0 text-white text-center fw-semibold fs-5 rounded-4 p-4"
                                style="background: #9ADE7B; min-height: 70px">
                                Cek Lokasi Emplasemen Sampah
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="container my-5">
        <div class="row">
            <h2 class="font-weight-bold text-center text-10 pt-3 mb-5">Berita</h2>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=0>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1080?health"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                            <div class="badges position-absolute" style="top: 4px; right:10px">
                                <span class="badge" style="background-color: red">Health</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=200>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1082?politics"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                            <div class="badges position-absolute" style="top: 4px; right:10px">
                                <span class="badge" style="background-color: rgb(236, 171, 74)">Politics</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=400>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1083?sport"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                            <div class="badges position-absolute" style="top: 4px; right:10px">
                                <span class="badge" style="background-color: rgb(66, 180, 146)">Sport</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=600>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1084?technology"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                            <div class="badges position-absolute" style="top: 4px; right:10px">
                                <span class="badge" style="background-color: rgb(0, 119, 255)">Technology</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>

        </div>

        <div class="row">
            <h2 class="font-weight-bold text-center text-10 pt-3 mb-5">Layanan Kami</h2>

            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=0>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1089"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=200>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1081"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=400>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1082"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>
            <div class="col-md-3 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=600>
                <article class="post post-medium border-0 pb-0 mb-5">
                    <div class="post-image">
                        <div class="position-relative">
                            <a href="#" class="ratio ratio-4x3 rounded-4">
                                <img data-lazy="https://source.unsplash.com/random/700×1087"
                                    style="object-fit: cover" class="rounded-4 lazy" alt="" />
                            </a>
                        </div>
                    </div>

                    <div class="post-content">
                        <h2 class="font-weight-semibold fs-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
                                class="text-break overflow-ellipsis-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, placeat delectus laboriosam praesentium quia totam!</a>
                        </h2>
                        <p class="text-break overflow-ellipsis-3">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur excepturi iusto vel earum, quas quos voluptatem facilis corrupti rerum, vero quaerat voluptatum? Voluptatum repellat aliquam tempora voluptatem sed error similique cum, quia ea vel quis nemo alias animi temporibus natus assumenda consequatur odio. Maiores, possimus doloremque dicta nemo suscipit aliquid!
                        </p>
                    </div>
                </article>
            </div>

        </div>

        <div class="row">
            <div class="col-12 col-md-6">
                <h2 class="mb-2 fw-bold">Pengumuman</h2>
                <div id="pengumuman-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay=0 data-plugin-options="{'items': 1, 'loop': true, 'autoHeight': true, 'margin': 10, 'autoplay': true, 'autoplayTimeout': 3000, 'autoplayHoverPause': true}">
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1920/?nature" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1921/?nature" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1922/?nature" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <h2 class="mb-2 fw-bold">Foto</h2>
                <div id="foto-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay=200 data-plugin-options="{'items': 1, 'loop': true, 'autoHeight': true, 'margin': 10, 'autoplay': true, 'autoplayTimeout': 3000, 'autoplayHoverPause': true}">
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1924/?sky" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1925/?sky" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                    <div class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                            <img data-lazy="https://source.unsplash.com/random/1080×1926/?sky" class="img-fluid w-100 h-100 lazy"
                                style="object-fit: cover;" alt="Nature">
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <h2 class="mb-2 fw-bold text-center mt-5 mb-0">Website Terkait</h2>
                <div class="logos">
                    <div class="logos-slide">
                        <img src="/dlh/img/logo/logo-dlh.png" />
                        <img src="/dlh/img/logo/logo-ikhtiar3.png" />
                        <img src="/dlh/img/logo/logo-jca2.png" />
                        <img src="/dlh/img/logo/logo.png" />
                        <img src="/dlh/img/logo/logo_klhk.png" />
                        <img src="/dlh/img/logo/logo_upst.jpg" />
                        <img src="/dlh/img/logo/logoaja-jsc.png" />
                        <img src="/dlh/img/logo/logoujiemisi.png" />
                        <img src="/dlh/img/logo/sipepeng1.jpg" />
                        <img src="/dlh/img/logo/UPsbadanaer.jpg" />
                    </div>
                    </div>
            </div>
        </div>

        <!-- Modal Info -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0">
                    <div class="modal-body">
                        <table>
                            <thead>
                                <tr>
                                    <td colspan="3"><label><b>Keterangan</b></label></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_green.png"
                                            style="width:12px;height:12px"></td>
                                    <td width="15%">0-50</td>
                                    <td width="80%" class="bg-green">&nbsp;&nbsp;Baik</td>
                                </tr>

                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Tingkat kualitas udara yang tidak memberikan efek bagi kesehatan manusia atau hewan
                                        dan
                                        tidak berpengaruh pada tumbuhan, bangunan ataupun nilai estetika</td>
                                </tr>
                                <tr>
                                    <td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_blue.png"
                                            style="width:12px;height:12px"></td>
                                    <td width="15%">51-100</td>
                                    <td width="80%" class="bg-blue">&nbsp;&nbsp;Sedang</td>
                                </tr>

                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Tingkat kualitas udara yang tidak berpengaruh pada kesehatan manusia ataupun hewan
                                        tetapi berpengaruh pada tumbuhan yang sensitif, dan nilai estetika</td>
                                </tr>
                                <tr>
                                    <td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_yellow.png"
                                            style="width:12px;height:12px"></td>
                                    <td width="15%">101-199</td>
                                    <td width="80%" class="bg-yellow">&nbsp;&nbsp;Tidak Sehat</td>
                                </tr>

                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Tingkat kualitas udara yang bersifat merugikan pada manusia ataupun kelompok hewan
                                        yang
                                        sensitif atau bisa menimbulkan kerusakan pada tumbuhan ataupun nilai estetika</td>
                                </tr>
                                <tr>
                                    <td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_red.png"
                                            style="width:12px;height:12px"></td>
                                    <td width="15%">200-299</td>
                                    <td width="80%" class="bg-red">&nbsp;&nbsp;Sangat Tidak Sehat</td>
                                </tr>

                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Tingkat kualitas udara yang dapat merugikan kesehatan pada sejumlah segmen populasi
                                        yang
                                        terpapar</td>
                                </tr>
                                <tr>
                                    <td width="5%"><img data-lazy="https://silika.jakarta.go.id/assets/img/pin_black.png"
                                            style="width:12px;height:12px"></td>
                                    <td width="15%">300-500</td>
                                    <td width="80%">&nbsp;&nbsp;Berbahaya</td>
                                </tr>

                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td>Tingkat kualitas udara berbahaya yang secara umum dapat merugikan kesehatan yang
                                        serius
                                        pada populasi</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @section scripts {
            <script>
                const copy = document.querySelector(".logos-slide").cloneNode(true);
                document.querySelector(".logos").appendChild(copy);
                execute_function()

                $(window).resize(function () {
                    carouselResponsive();
                });

                async function execute_function(){
                    carouselResponsive()
                    generate_konten()
                    generate_ispu()
                    temp_assign_ispu()
                }

                function carouselResponsive() {
                    let width = $(window).width();
                    let data = {
                        'items': 1,
                        'loop': true,
                        'autoHeight': true,
                        'margin': 10,
                        'autoplay': true,
                        'autoplayTimeout': 3000,
                        'autoplayHoverPause': true
                    };

                    width < 768 ? data['nav'] = false : data['nav'] = true;

                    $("#berita-carousel").data("plugin-options", data);
                }

                async function kualitas_udara() {
                    const country = "Indonesia"
                    const state = "Jakarta"
                    const city = "Jakarta"
                    const key = "adf2d4c4-7a82-495a-8710-dc754d18ae47"
                    const udara = await get_data(`http://api.airvisual.com/v2/city?city=${city}&state=${state}&country=${country}&key=${key}`)
                    // console.log(udara.data);
                }

                async function get_data(endpoint) {
                    return await fetch(endpoint).then(res => res.json())
                }

                function getTimeAgo(referenceDate) {
                    const currentDate = new Date();
                    const referenceTime = new Date(referenceDate).getTime();
                    const currentTime = currentDate.getTime();
                    const timeDifference = currentTime - referenceTime;

                    const seconds = Math.floor(timeDifference / 1000);
                    const minutes = Math.floor(seconds / 60);
                    const hours = Math.floor(minutes / 60);
                    const days = Math.floor(hours / 24);
                    const months = Math.floor(days / 30);
                    const years = Math.floor(months / 12);

                    if (years > 0) {
                        return `${years} tahun yang lalu`;
                    } else if (months > 0) {
                        return `${months} bulan yang lalu`;
                    } else if (days > 0) {
                        return `${days} hari yang lalu`;
                    } else if (hours > 0) {
                        return `${hours} jam yang lalu`;
                    } else if (minutes > 0) {
                        return `${minutes} menit yang lalu`;
                    } else {
                        return `${seconds} detik yang lalu`;
                    }
                }

                function generate_konten() {
                    const data = [
                        {
                            "judul": "Pemandangan Indah di Pegunungan",
                            "kategori": "Wisata Alam",
                            "ukuran_pixel": {
                                "lebar": 1920,
                                "tinggi": 1080
                            },
                            "tanggal": "2023-12-07T08:45:00.000Z"
                        },
                        {
                            "judul": "Resep Masakan Tradisional",
                            "kategori": "Kuliner",
                            "ukuran_pixel": {
                                "lebar": 1280,
                                "tinggi": 720
                            },
                            "tanggal": "2023-10-08T08:45:00.000Z"
                        },
                        {
                            "judul": "Tren Mode Terkini",
                            "kategori": "Fashion",
                            "ukuran_pixel": {
                                "lebar": 1440,
                                "tinggi": 900
                            },
                            "tanggal": "2023-01-20T15:20:00.000Z"
                        },
                        {
                            "judul": "Teknologi Canggih di Era Modern",
                            "kategori": "Teknologi",
                            "ukuran_pixel": {
                                "lebar": 1920,
                                "tinggi": 1080
                            },
                            "tanggal": "2020-11-05T09:10:00.000Z"
                        },
                        {
                            "judul": "Seni Lukis Kontemporer",
                            "kategori": "Seni",
                            "ukuran_pixel": {
                                "lebar": 1600,
                                "tinggi": 900
                            },
                            "tanggal": "2022-08-12T14:15:00.000Z"
                        }
                    ]

                    let element = ""
                    for (const value of data) {
                        element += `
                                    <div
                                        class="thumb-info thumb-info-no-borders rounded-4 thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom">
                                        <span class="berita thumb-info-wrapper rounded-4" style="aspect-ratio: 4/3">
                                            <img src="https://source.unsplash.com/random/${value.ukuran_pixel.lebar}×${value.ukuran_pixel.tinggi}/?${value.kategori}" class="img-fluid w-100 h-100"
                                                style="object-fit: cover;" alt="${value.judul}" loading="lazy">
                                            <span class="thumb-info-title p-3 p-md-4" style="min-height: 20%">
                                                <span class="thumb-info-inner line-height-3 text-break overflow-ellipsis-3">${value.judul}</span>
                                                <span class="thumb-info-type opacity-8">${value.kategori} | ${getTimeAgo(value.tanggal)}</span>
                                            </span>
                                        </span>
                                    </div>
                                    `
                    }
                    $("#berita-carousel").html(element)
                }

                function generate_ispu() {
                    const data = [
                        {
                            "id": 1,
                            "status": "baik",
                            "class_name": "baik",
                            "nilai": 25,
                            "icons": "😊"
                        },
                        {
                            "id": 2,
                            "status": "sedang",
                            "class_name": "sedang",
                            "nilai": 75,
                            "icons": "😐"
                        },
                        {
                            "id": 3,
                            "status": "tidak sehat",
                            "class_name": "tidak-sehat",
                            "nilai": 150,
                            "icons": "😷"
                        },
                        {
                            "id": 4,
                            "status": "sangat tidak sehat",
                            "class_name": "sangat-tidak-sehat",
                            "nilai": 250,
                            "icons": "😰"
                        },
                        {
                            "id": 5,
                            "status": "berbahaya",
                            "class_name": "berbahaya",
                            "nilai": 305,
                            "icons": "🚫"
                        }
                    ]

                    // Mencari data dengan nilai terbesar
                    const maxData = data.reduce((max, current) => (current.nilai > max.nilai ? current : max), data[0])
                    assign_ispu(maxData)


                    $("#lokasi").on("change", function (e) {
                        const id = e.target.value
                        const selected = data.filter(data => {
                            return data.id == id
                        })
                        assign_ispu(selected[0])
                    })
                }   

                function assign_ispu(data) {
                    if(!data.class_name){
                        console.log("class_name tidak ditemukan!");
                    }
                    $("#ispu-container").attr("class", `row align-items-stretch text-center mx-1 mx-md-0 rounded-4 ${data.class_name}`)
                    $("#ispu-icons").text(data.icons)
                    $("#ispu-status").text(data.status)
                    $("#ispu-value").text(data.nilai)
                    $("#lokasi").html(
                        `
                        <option value="1" ${data.id == 1 ? "selected" : ""}>Jakarta Timur - Lubang Buaya</option>
                        <option value="2" ${data.id == 2 ? "selected" : ""}>Jakarta Utara - Kelapa Gading</option>
                        <option value="3" ${data.id == 3 ? "selected" : ""}>Jakarta Barat - Kebun Jeruk</option>
                        <option value="4" ${data.id == 4 ? "selected" : ""}>Jakarta Pusat - Bundaran HI</option>
                        <option value="5" ${data.id == 5 ? "selected" : ""}>Jakarta Selatan - Jagakarsa</option>
                        `
                    )
                }

                function temp_assign_ispu(id) {
                    const data = [
                        {
                            "id": 1,
                            "status": "baik",
                            "class_name": "baik",
                            "nilai": 25,
                            "icons": "😊"
                        },
                        {
                            "id": 2,
                            "status": "sedang",
                            "class_name": "sedang",
                            "nilai": 75,
                            "icons": "😐"
                        },
                        {
                            "id": 3,
                            "status": "tidak sehat",
                            "class_name": "tidak-sehat",
                            "nilai": 150,
                            "icons": "😷"
                        },
                        {
                            "id": 4,
                            "status": "sangat tidak sehat",
                            "class_name": "sangat-tidak-sehat",
                            "nilai": 250,
                            "icons": "😰"
                        },
                        {
                            "id": 5,
                            "status": "berbahaya",
                            "class_name": "berbahaya",
                            "nilai": 305,
                            "icons": "🚫"
                        }
                    ]

                    const selected = data.filter(data => {
                        return data.id == id
                    })

                    assign_ispu(selected[0])

                }
            </script>
        }