@{
    ViewBag.title = "Tupoksi";
    ViewBag.menu = "Profil";
}

<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 id="berkas" class="row gy-4">
        </div>
    </div>
</section>

<script>
    const tupoksi = [
            {
                "nama": "Pergub No. 284 Tahun 2016 Tentang Dinas Lingkungan Hidup Provinsi DKI Jakarta",
                "files": [
                    { "name_file": "PERGUB NO.284 TAHUN.2016", "url_file": "PERGUB_NO.284_TAHUN_.2016.pdf" }
                ]
            },
            {
                "nama": "Pergub No. 399 Tahun 2016 Tentang Unit Pelaksana Kebersihan Badan Air",
                "files": [
                    { "name_file": "PERGUB NO.399 TAHUN.2016", "url_file": "peraturan_438PERGUB_NO._399_TAHUN_2016_.pdf" }
                ]
            },
            {
                "nama": "Pergub No. 398 Tahun 2016 Tentang Unit Laboratorium Lingkungan Hidup Daerah",
                "files": [
                    { "name_file": "PERGUB NO.398 TAHUN.2016", "url_file": "2016-Peraturan Gubernur DKI Jakarta Nomor 398 Tahun 2016.pdf" }
                ]
            },
            {
                "nama": "Pergub No. 400 Tahun 2016 Tentang Unit Pengelola Sampah Terpadu",
                "files": [
                    { "name_file": "PERGUB NO.400 TAHUN.2016", "url_file": "PERGUB_NO.400_TAHUN_.2016_.pdf" }
                ]
            },
            {
                "nama": "Pergub No. 57 Tahun 2022 Tentang Organisasi dan Tata Kerja Perangkat Daerah",
                "files": [
                    { "name_file": "Naskah Komprehensif Pergub No. 57 Tahun 2022", "url_file": "Naskah_Komprehensif_PergubNo.57Tahun2022_1.pdf" },
                    { "name_file": "Lamp XVI SOTK DLH Pergub No. 57 Tahun 2022", "url_file": "SOTK_Lamp_XVI_DLH_PergubNo.57Tahun2022.pdf" }
                ]
            }
        ]

        let el = ""

        for(const data of tupoksi){

            let files = ""
            for(const file of data.files){
                files += `
                <a href="/dlh/pdfs/tupoksi/${file.url_file}" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="${file.name_file}" target="_blank">
                    <img src="/dlh/svgs/pdf.svg" width="60" alt="${file.name_file}">
                </a>
                <small class="d-block d-md-none" style="font-size: .8rem">${file.name_file}.pdf</small>
                `
            }

            el += `
                <div class="col-12">
                    <h4>${data.nama}</h4>
                    <div class="d-flex gap-3 align-items-center">
                        ${files}
                    </div>
                </div>
            `
        }

        $("#berkas").html(el)
</script>