@{
    Layout = "_Layout";

    ViewData["Title"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "DIKPLHD, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah";
    ViewData["TitleBeforeHighlight"] = "Dokumen Informasi";
    ViewData["TitleHighlight"] = "Kinerja Pengelolaan Lingkungan Hidup Daerah";
}

<!-- 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">DIKPLHD</h1>
            <p class="text-gray-600 max-w-4xl mx-auto">Daftar Informasi Publik Dinas Lingkungan Hidup Provinsi DKI Jakarta dapat dilihat dihalaman data ini atau dapat dilihat pada halaman pusat data Pemerintah Provinsi DKI Jakarta (data.jakarta.go.id) baik data secara berkala, sesaat dan serta merta apabila dibutuhkan</p>
        </div>
    </div>
</div>

<div class="container max-w-6xl mx-auto py-12">
    <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>