@{
    ViewBag.title = "Kajian";
    ViewBag.menu = "Publikasi Data";
}

<link rel="stylesheet" href="/lib/magnifier/magnifier.css">

<section class="page-header page-header-classic page-header-sm bg-secondary">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                <h1 data-title-border>@ViewBag.title</h1>
            </div>
            <div class="col-md-4 order-1 order-md-2 align-self-center">
                <ul class="breadcrumb d-block text-md-end fw-semibold">
                    <li><a href="/" class="text-quaternary">Home</a></li>
                    @if (ViewBag.menu != null || ViewBag.menu != null)
                    {
                        <li><a href="#" class="text-quaternary">@ViewBag.menu</a></li>
                    }
                    @if (ViewBag.submenu != null || ViewBag.submenu != null)
                    {
                        <li><a href="#" class="text-quaternary">@ViewBag.submenu</a></li>
                    }
                    <li class="text-light">@ViewBag.title</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="row">
            <div class="col-12 text-justify">
                <div class="row" id="berkas">
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                    <div class="col-12 col-md-2 text-center border">
                        <img src="/dlh/svgs/pdf.svg" style="max-width: 72px;" alt="">
                        <p>Lorem ipsum dolor sit amet.pdf</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    const data = [
        {
            "name": "Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019",
            "thumbnail_path": "/dlh/img/buku1dikplhd2019.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf"
        },
        {
            "name": "Buku II DIKPLHD Tahun 2019",
            "thumbnail_path": "/dlh/img/buku2dikplhd2019.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf"
        },
        {
            "name": "Buku I Ringkasan Eksekutif DIKPLHD Tahun 2020",
            "thumbnail_path": "/dlh/img/buku1dikplhd2020.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf"
        },
        {
            "name": "Buku II DIKPLHD Tahun 2020",
            "thumbnail_path": "/dlh/img/buku2dikplhd2020.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_2_DIKPLHD.pdf"
        },
        {
            "name": "Buku I Ringkasan Eksekutif DIKPLHD Tahun 2021",
            "thumbnail_path": "/dlh/img/buku1dikplhd2021ok.PNG",
            "file_path": "/dlh/pdfs/dikplh/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2021.pdf"
        },
        {
            "name": "Buku II DIKPLHD Tahun 2021",
            "thumbnail_path": "/dlh/img/buku2dikplhd2021.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_2_DIKPLHD_2021.pdf"
        },
        {
            "name": "Ringkasan Eksekutif DIKPLHD Tahun 2022",
            "thumbnail_path": "/dlh/img/DIKPLHDRingkasanEksekutifJakarta20222.jpg",
            "file_path": "/dlh/pdfs/dikplh/Buku_2_DIKPLHD_2021.pdf"
        },
        {
            "name": "DIKPLHD Tahun 2022",
            "thumbnail_path": "/dlh/img/DIKPLHDJakarta20222.jpg",
            "file_path": "/dlh/pdfs/dikplh/Buku_2_DIKPLHD_2021.pdf"
        },
        {
            "name": "Ringkasan Eksekutif DIKPLHD Tahun 2023",
            "thumbnail_path": "/dlh/img/dikplhdjak2023ringkasan.png",
            "file_path": "/dlh/pdfs/dikplh/Buku_2_DIKPLHD_2021.pdf"
        },
        {
            "name": "DIKPLHD Tahun 2023",
            "thumbnail_path": "/dlh/img/dikplhdjak20231.png",
            "file_path": "/dlh/pdfs/dikplh/dikplh/DIKPLHD_Jakarta_2023.pdf"
        }
    ]

    let element = ""
    for(const value of data){
        console.log(value);
        element += `
        <div class="col-12 col-md-2 text-center">
            
        </div>
        `
    }
        @* $("#berkas").html(element) *@

</script>