@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 appear-animation"
                data-appear-animation="fadeInUpShorter" data-appear-animation-delay=0 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 appear-animation"
                data-appear-animation="fadeInUpShorter" data-appear-animation-delay=200 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 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>

            <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 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=300>
                <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 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=600>
                <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 appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay=900>
                <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 Badan Air
                        </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-4 col-lg-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="d-block ratio ratio-16x9 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">Tegakkan Hukum Uji Emisi, Polda Metro Ambil Tindakan
                            Edukatif-Represif</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3 mb-1">
                        Dalam rangka pelaksanaan Operasi Zebra Jaya 2023, Polda Metro Jaya bersama Dinas Lingkungan
                        Hidup DKI Jakarta, PT. Astra Intenasional mengadakan uji emisi gratis di area Komplek Gelora
                        Bung Karno, Rabu
                    </p>
                </div>
                <div class="post-meta">
                    <span><i class="far fa-calendar"></i> 20 Des 2023</span>
                    <span><i class="far fa-clock"></i> 3 min baca</span>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-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="d-block ratio ratio-16x9 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">Sinergi Tekan Polusi Udara Jakarta Terus
                            Dilakukan</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3">
                        Pemprov DKI Jakarta sedang melaksanakan upaya mitigasi untuk mewujudkan target penurunan emisi
                        gas rumah kaca di Wilayah DKI Jakarta.
                    </p>
                </div>
                <div class="post-meta">
                    <span><i class="far fa-calendar"></i> 20 Des 2023</span>
                    <span><i class="far fa-clock"></i> 3 min baca</span>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-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="d-block ratio ratio-16x9 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 class="post-meta">
                        <span><i class="far fa-calendar"></i> 20 Des 2023</span>
                        <span><i class="far fa-clock"></i> 3 min baca</span>
                    </div>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-3 d-md-none d-lg-block 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="d-block ratio ratio-16x9 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-4 col-lg-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="d-block ratio ratio-16x9 rounded-4">
                            <img data-lazy="https://source.unsplash.com/random/700×1089?electronic"
                                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">Penjemputan E-Waste</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3">
                        Layanan Jemput Gratis limbah elektronik untuk warga Jakarta
                    </p>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-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="d-block ratio ratio-16x9 rounded-4">
                            <img data-lazy="https://source.unsplash.com/random/700×1081?environtment"
                                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">AMDAL</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3">
                        Analisa Mengenai Dampak Lingkungan
                    </p>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-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="d-block ratio ratio-16x9 rounded-4">
                            <img data-lazy="https://source.unsplash.com/random/700×1082?chemistry"
                                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">Uji Sample LLHD</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3">
                        Uji dan Analisis Lingkungan
                    </p>
                </div>
            </article>
        </div>
        <div class="col-md-4 col-lg-3 d-md-none d-lg-block 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="d-block ratio ratio-16x9 rounded-4">
                            <img data-lazy="https://source.unsplash.com/random/700×1087?Bus" 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">Bus Toilet</a>
                    </h2>
                    <p class="text-break overflow-ellipsis-3">
                        Layanan Peminjaman Bus Toilet
                    </p>
                </div>
            </article>
        </div>

    </div>

    <div class="row">
        <div class="col-12 col-md-8">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h3 class="mb-2 fw-bold">Pengumuman</h3>
                    <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">
                    <h3 class="mb-2 fw-bold">Foto</h3>
                    <div id="foto-carousel" class="owl-carousel owl-theme nav-inside dots-modern appear-animation"
                        data-appear-animation="fadeInUpShorter" data-appear-animation-delay=300
                        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>
        <div class="col-12 col-md-4">
            <div class="row">
                <div class="col-12 col-md-12">
                    <h3 class="mb-2 fw-bold">Social Media</h3>
                    <div class="tabs">
                        <ul class="nav nav-tabs nav-justified flex-column flex-md-row">
                            <li class="nav-item">
                                <a class="nav-link active" href="#instagram-tabs" data-bs-toggle="tab"
                                    class="text-center">Instagram</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#x-tabs" data-bs-toggle="tab"
                                    class="text-center">X(Twitter)</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#facebook-tabs" data-bs-toggle="tab"
                                    class="text-center">Facebook</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="instagram-tabs" class="tab-pane active">
                                <div class="d-flex gap-3 mt-3">
                                    <img src="/img/logos/logo-dlh.png" class="rounded-circle h-100" width="35"
                                        alt="Logo Instagram">
                                    <div class="d-flex justify-content-between gap-3">
                                        <div>
                                            <div class="d-flex align-items-center gap-3">
                                                <span class="d-flex align-items-center gap-1">
                                                    <span class="fs-6 text-dark fw-semibold">dinaslhdki</span>
                                                    <img src="/dlh/img/icons/ig-verified.png" width="18" alt="">
                                                </span>
                                                <a href="https://www.instagram.com/dinaslhdki" target="_blank"
                                                    class="btn btn-sm btn-info px-3 py-1 border-0 text-dark rounded-2"
                                                    style="font-size: .7rem; background-color: rgb(239, 239, 239);">Follow</a>
                                            </div>
                                            <p class="text-dark fw-semibold mt-2 mb-0">Dinas Lingkungan Hidup DKI
                                                Jakarta</p>
                                            <span class="text-dark" style="font-size: .8rem">Akun Resmi Dinas Lingkungan
                                                Hidup Provinsi DKI Jakarta. <br>
                                                Kontak : <a
                                                    href="mailto:dinaslh&#64;jakarta.go.id">dinaslh&#64;jakarta.go.id</a>
                                                <a href="https://www.instagram.com/jakartasadarsampah"
                                                    target="_blank">&#64;jakartasadarsampah</a></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="x-tabs" class="tab-pane">
                                <img src="https://pbs.twimg.com/profile_banners/2789007025/1483205548/1080x360" class="w-100" alt="">
                                <div class="px-2" style="margin-top: -20px">
                                    <div class="d-flex align-items-end justify-content-between">
                                        <img src="/img/logos/logo-dlh.png" class="rounded-circle h-100 bg-white border border-3 border-white" width="50">
                                        <div class="d-flex">
                                            <a href="https://twitter.com/dinaslhdki" target="_blank"
                                                    class="btn btn-sm btn-info px-3 py-1 border-0 mb-1 bg-dark text-light rounded-pill"
                                                    style="font-size: .55rem">Follow</a>
                                        </div> 
                                    </div>
                                    <div>
                                        <p class="mt-1 text-dark mb-0 fw-semibold ">Dinas LH DKI Jakarta</p>
                                        <p class="mb-0 text-muted">&#64;dinaslhdki</p>
                                        <p class="mb-0 text-dark">Akun Resmi Dinas Lingkungan Hidup Pemerintah Provinsi DKI Jakarta</p>
                                    </div>
                                </div>
                            </div>
                            <div id="facebook-tabs" class="tab-pane">
                                <img src="https://pbs.twimg.com/profile_banners/2789007025/1483205548/1080x360" class="w-100" alt="">
                                <div class="px-2" style="margin-top: -10px">
                                    <div class="d-flex align-items-end justify-content-between">
                                        <div class="col-9 d-flex align-items-end gap-1">
                                            <img src="/img/logos/logo-dlh.png" class="rounded-circle h-100 bg-white border border-3 border-white" width="50">
                                            <div class="d-flex">
                                                <p class="d-block text-dark fw-bold mb-0" style="font-size: .75rem; line-height: .9rem;">Dinas Lingkungan Hidup DKI Jakarta <span><img src="/dlh/img/icons/fb-verified.png" height="12" width="12" alt=""></span></p>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <a href="https://www.facebook.com/DinasLingkunganHidupDKIjakarta" target="_blank"
                                                    class="btn btn-sm btn-info px-2 py-1 border-0 mb-1 text-dark rounded-1"
                                                    style="font-size: .55rem; background-color: #E4E6EB;"><i class="fa-solid fa-square-plus"></i> Ikuti</a>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 data-lazy="https://source.unsplash.com/random/${value.ukuran_pixel.lebar}×${value.ukuran_pixel.tinggi}/?${value.kategori}" class="img-fluid w-100 h-100 lazy"
                                                        style="object-fit: cover;" alt="${value.judul}">
                                                    <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>
    }