@{
    Layout = "_Layout";

    ViewData["Title"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
    ViewData["Keywords"] = "Laporan Pemantauan Kualitas Air, Regulasi Lingkungan, Kualitas Air, Data Lingkungan, Jakarta";
    ViewData["OgTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
    ViewData["TwitterTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Laporan Pemantauan Kualitas Air";
    ViewData["TitleBeforeHighlight"] = "Laporan";
    ViewData["TitleHighlight"] = "Pemantauan Kualitas Air";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="flex justify-center">
    <div class="w-full max-w-6xl py-12">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-4">Laporan Pemantauan Kualitas Air</h1>
            <p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
                Kumpulan laporan hasil pemantauan kualitas air yang dilakukan secara berkala oleh Dinas Lingkungan Hidup DKI Jakarta. 
                Dokumen-dokumen ini memuat data dan analisis kondisi kualitas air di berbagai titik pemantauan di wilayah Jakarta, 
                termasuk sungai, waduk, dan sumber air lainnya. Laporan ini menjadi dasar evaluasi kebijakan pengelolaan kualitas 
                air dan upaya perbaikan lingkungan untuk menjaga ketersediaan air bersih bagi masyarakat Jakarta.
            </p>
        </div>
    </div>
</div>

<div class="container max-w-6xl mx-auto pb-8">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm border border-gray-100 p-8 backdrop-blur-sm">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                <i class="fas fa-file-archive text-green-600 mr-3"></i>
                Dokumen
                </h2>
             <div class="flex items-center gap-3">
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
                    <div class="flex items-center gap-2">
                        <label class="text-sm font-medium text-gray-700">Filter:</label>
                        <select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option>Semua Tahun</option>
                            <option>2024</option>
                            <option>2023</option>
                            <option>2019</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                  <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                 <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                
                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

            </div>
            </div>
        </div>

        <!-- Enhanced Sidebar -->
        <div class="lg:w-1/3 space-y-6">
            <!-- Search Box -->
            <div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-search text-green-600 mr-3"></i>
                    Cari Dokumen
                </h3>
                <div class="relative">
                    <input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
                        Cari
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<register-block dynamic-section="css" key="cssDIKPLHD">
    <link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>

<register-block dynamic-section="scripts" key="jsDIKPLHD">
    <script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>