@{
    ViewBag.title = "Daftar Artikel";
    ViewBag.menu = "Artikel";
}


<!-- List Article -->
<div class="container">
    <div class="row mt-5">
        <div class="col">
            <div class="blog-posts">
                <div class="text-center mb-5">
                    <h1 class="fw-bold mb-2">Berita Lingkungan Hidup</h1>
                    <p class="fs-6">Ikuti program, kegiatan, dan informasi terbaru tentang Dinas Lingkungan Hidup
                        Provinsi DKI
                        Jakarta</p>
                </div>
                <!--
                Max Character Title: 78 Char (3 Lines)
                Max Character Description: 119 Char (3 Lines)
                -->
                <div id="list-article" class="row">
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="col-md-4">
                        <article class="border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative placeholder-glow">
                                    <a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
                                        <div class="rounded-4" style="object-fit: cover"></div>
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="placeholder col-6"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content placeholder-glow">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
                                <p class="text-break overflow-ellipsis-3 placeholder col-12"></p>

                                <div class="post-meta placeholder-glow">
                                    <div class="d-flex align-items-center">
                                        <div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
                                        </div>
                                        <a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
                                            class="ms-2 placeholder col-3"></span>
                                        <div class="ms-2 placeholder col-3"></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <ul class="pagination justify-content-center">
                <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
            </ul>
        </div>
    </div>
</div>

@* <div class="alert alert-danger position-fixed appear-animation animated fadeInRight appear-animation-visible" data-appear-animation="fadeInRight" data-appear-animation-delay="0" data-appear-animation-duration="1s" style="animation-duration: 1s; animation-delay: 0ms; bottom: 10px; right: 10px; z-index: 999">
    Anda sedang <strong>Offline</strong>
</div> *@

<script>
    const data = [
        {
            "id": 1,
            "title": "Manfaat Meditasi untuk Kesehatan Mental",
            "description": "Menjelajahi manfaat meditasi dalam meningkatkan kesehatan mental dan kebahagiaan sehari-hari.",
            "image": "650x700",
            "badge": "health",
            "color_badge": "#27ae60"
        },
        {
            "id": 2,
            "title": "Inovasi Terbaru dalam Teknologi Gadget",
            "description": "Mengulas perkembangan terkini dalam dunia teknologi gadget dan perangkat pintar.",
            "image": "600x550",
            "badge": "technology",
            "color_badge": "#3498db"
        },
        {
            "id": 3,
            "title": "Tips Efektif Mengelola Waktu di Era Digital",
            "description": "Memberikan strategi praktis untuk mengoptimalkan pengelolaan waktu dalam rutinitas harian.",
            "image": "700x600",
            "badge": "productivity",
            "color_badge": "#f39c12"
        },
        {
            "id": 4,
            "title": "Mengenal Kesehatan Jantung: Fakta dan Mitos",
            "description": "Memisahkan fakta dari mitos seputar kesehatan jantung untuk hidup yang lebih sehat.",
            "image": "750x550",
            "badge": "health",
            "color_badge": "#e74c3c"
        },
        {
            "id": 5,
            "title": "Belajar Bahasa Asing: Panduan untuk Pemula",
            "description": "Langkah-langkah praktis untuk memulai perjalanan belajar bahasa asing dengan sukses.",
            "image": "800x600",
            "badge": "education",
            "color_badge": "#9b59b6"
        },
        {
            "id": 6,
            "title": "Keajaiban Alam Semesta: Lubang Hitam dan Galaksi",
            "description": "Eksplorasi fenomena alam semesta, dari lubang hitam hingga keindahan galaksi.",
            "image": "720x480",
            "badge": "science",
            "color_badge": "#e74c3c"
        },
        {
            "id": 7,
            "title": "Resep Sehat dan Lezat untuk Sarapan Pagi",
            "description": "Ide-ide resep sarapan yang sehat dan lezat untuk memulai hari dengan energi.",
            "image": "600x700",
            "badge": "food",
            "color_badge": "#27ae60"
        },
        {
            "id": 8,
            "title": "Cara Efektif Menangani Stres di Tempat Kerja",
            "description": "Strategi untuk mengatasi stres di lingkungan kerja dan meningkatkan kesejahteraan.",
            "image": "650x600",
            "badge": "health",
            "color_badge": "#e74c3c"
        },
        {
            "id": 9,
            "title": "Teknologi Blockchain: Masa Depan Keamanan Digital",
            "description": "Mengulas konsep blockchain dan dampaknya pada keamanan digital di era modern.",
            "image": "700x550",
            "badge": "technology",
            "color_badge": "#3498db"
        },
        {
            "id": 10,
            "title": "Seni Digital: Eksplorasi Kreativitas di Era Digital",
            "description": "Menjelajahi dunia seni digital dan cara teknologi memengaruhi kreativitas seniman.",
            "image": "720x620",
            "badge": "art",
            "color_badge": "#9b59b6"
        },
        {
            "id": 11,
            "title": "Pentingnya Hidrasi: Manfaat Air Putih untuk Tubuh",
            "description": "Mendiskusikan manfaat kesehatan dari minum air putih secara cukup setiap hari.",
            "image": "700x600",
            "badge": "health",
            "color_badge": "#27ae60"
        },
        {
            "id": 12,
            "title": "Serunya Bersepeda: Aktivitas Olahraga yang Menyenangkan",
            "description": "Mengajak pembaca untuk menikmati manfaat olahraga sepeda dan tips memilih sepeda yang tepat.",
            "image": "650x550",
            "badge": "sport",
            "color_badge": "#e74c3c"
        },
        {
            "id": 13,
            "title": "Cara Membuat Smoothie Sehat dan Bergizi",
            "description": "Berbagai resep smoothie yang lezat dan menyehatkan untuk dinikmati di pagi hari atau sebagai camilan.",
            "image": "750x700",
            "badge": "food",
            "color_badge": "#f39c12"
        },
        {
            "id": 14,
            "title": "Exploring the Wonders of Deep Sea Creatures",
            "description": "Discovering the fascinating world of deep-sea creatures and their unique adaptations.",
            "image": "720x480",
            "badge": "science",
            "color_badge": "#3498db"
        },
        {
            "id": 15,
            "title": "Strategi Sukses dalam Belajar Online",
            "description": "Memberikan tips dan trik untuk sukses dalam pembelajaran online dan meningkatkan produktivitas belajar.",
            "image": "600x650",
            "badge": "education",
            "color_badge": "#9b59b6"
        },
        {
            "id": 16,
            "title": "Menjadi Pekerja Lebih Fleksibel: Keuntungan dan Tips",
            "description": "Mengulas manfaat menjadi pekerja yang lebih fleksibel dan cara mencapainya dalam lingkungan kerja.",
            "image": "700x600",
            "badge": "career",
            "color_badge": "#f39c12"
        },
        {
            "id": 17,
            "title": "Perjalanan Kuliner: Menikmati Kelezatan Makanan Lokal",
            "description": "Menjelajahi aneka makanan lokal yang lezat dan menggugah selera dari berbagai penjuru dunia.",
            "image": "800x600",
            "badge": "food",
            "color_badge": "#e74c3c"
        },
        {
            "id": 18,
            "title": "Mengapa Kucing adalah Hewan Peliharaan yang Menyenangkan",
            "description": "Mendiskusikan pesona dan manfaat memiliki kucing sebagai hewan peliharaan.",
            "image": "650x550",
            "badge": "pets",
            "color_badge": "#3498db"
        },
        {
            "id": 19,
            "title": "Cara Memulai Usaha Kecil yang Sukses",
            "description": "Panduan langkah demi langkah untuk memulai usaha kecil dengan sukses dan berkembang.",
            "image": "720x620",
            "badge": "business",
            "color_badge": "#f39c12"
        },
        {
            "id": 20,
            "title": "Menjelajahi Keindahan Alam: Destinasi Wisata Outdoor",
            "description": "Merinci destinasi wisata outdoor yang menawarkan pemandangan alam yang luar biasa dan petualangan seru.",
            "image": "700x550",
            "badge": "travel",
            "color_badge": "#27ae60"
        },
        {
            "id": 21,
            "title": "Tips Menata Ruang Kerja yang Nyaman di Rumah",
            "description": "Memberikan saran tentang cara menciptakan ruang kerja yang nyaman dan produktif di rumah.",
            "image": "700x600",
            "badge": "home",
            "color_badge": "#f39c12"
        },
        {
            "id": 22,
            "title": "Exploring the Marvels of Underwater Photography",
            "description": "Discovering the art and challenges of capturing breathtaking moments through underwater photography.",
            "image": "650x550",
            "badge": "art",
            "color_badge": "#9b59b6"
        },
        {
            "id": 23,
            "title": "Kiat Sukses dalam Menjalani Hidup Sehat",
            "description": "Tips praktis untuk menjalani gaya hidup sehat dengan keseimbangan antara makanan, olahraga, dan istirahat.",
            "image": "750x700",
            "badge": "health",
            "color_badge": "#27ae60"
        },
        {
            "id": 24,
            "title": "Mengenal Budaya Teh: Sejarah dan Manfaatnya",
            "description": "Menjelajahi sejarah teh dan berbagai budaya teh di seluruh dunia, serta manfaatnya untuk kesehatan.",
            "image": "720x480",
            "badge": "food",
            "color_badge": "#e74c3c"
        },
        {
            "id": 25,
            "title": "Strategi Investasi untuk Pemula: Mulai Dengan Bijak",
            "description": "Panduan langkah demi langkah untuk pemula dalam berinvestasi dan membangun portofolio keuangan yang kokoh.",
            "image": "600x650",
            "badge": "finance",
            "color_badge": "#3498db"
        },
        {
            "id": 26,
            "title": "Panduan Membuat Kebun Sayur di Halaman Belakang",
            "description": "Langkah-langkah praktis untuk memulai kebun sayur di halaman belakang rumah Anda.",
            "image": "700x600",
            "badge": "home",
            "color_badge": "#27ae60"
        },
        {
            "id": 27,
            "title": "Mengenali Jenis-jenis Kucing yang Unik dan Langka",
            "description": "Menjelajahi dunia kucing dengan merinci jenis-jenis kucing yang unik dan langka.",
            "image": "800x600",
            "badge": "pets",
            "color_badge": "#e74c3c"
        },
        {
            "id": 28,
            "title": "Manfaat Seni Terapi: Melukis untuk Kesehatan Mental",
            "description": "Mengulas bagaimana melukis dapat menjadi bentuk terapi untuk meningkatkan kesehatan mental.",
            "image": "650x550",
            "badge": "art",
            "color_badge": "#9b59b6"
        },
        {
            "id": 29,
            "title": "Teknologi 5G: Revolusi Koneksi Internet",
            "description": "Mendiskusikan dampak teknologi 5G dalam merubah cara kita terhubung dengan internet.",
            "image": "720x620",
            "badge": "technology",
            "color_badge": "#3498db"
        },
        {
            "id": 30,
            "title": "Rahasia Rasa dalam Masakan Tradisional",
            "description": "Mengungkap rahasia rasa dalam masakan tradisional dari berbagai belahan dunia.",
            "image": "700x550",
            "badge": "food",
            "color_badge": "#e74c3c"
        }
    ];

    generateArticle(data)


    function generateArticle(data) {
        sliceData(data, 0, 9)
    }

    function sliceData(data, start, end) {
        const newData = data.slice(start, end)

        let articles = ""

        let delay = 0
        for (const [index, element] of newData.entries()) {
            const dynamicDelay = index % 2 === 0 ? delay : (delay + 300);

            articles += `
                    <div class="col-md-4 col-lg-3 ${index % 9 == 0 ? "d-lg-none" : "d-block"} appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay=${delay}>
                        <article class="post post-medium border-0 pb-0 mb-5">
                            <div class="post-image">
                                <div class="position-relative">
                                    <a href="/2023/12/12/inovasi-terbaru-dalam-teknologi-gadget" class="d-block ratio ratio-16x9 rounded-4">
                                        <img data-lazy="https://source.unsplash.com/random/${element.image}/?${element.badge}"
                                            style="object-fit: cover" class="rounded-4 lazy" alt="${element.title}" />
                                    </a>
                                    <div class="badges position-absolute" style="top: 4px; right:10px">
                                        <span class="badge" style="background-color: ${element.color_badge}">${element.badge}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="post-content">
                                <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="/2023/12/12/inovasi-terbaru-dalam-teknologi-gadget"
                                        class="text-break overflow-ellipsis-3">${element.title}</a>
                                </h2>
                                <p class="text-break overflow-ellipsis-3">
                                    ${element.description}
                                </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>
                `

                delay += 300;
        }
        const container_post = document.querySelector("#list-article")
        container_post.innerHTML = articles
    }
</script>