@{
    Layout = "_Layout";

    ViewData["Title"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Struktur Organisasi, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Struktur Organisasi";
    ViewData["TitleBeforeHighlight"] = "Struktur";
    ViewData["TitleHighlight"] = "Organisasi";
}

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

<section class="container max-w-6xl mx-auto px-4 py-8">
    <div class="flex justify-center text-center">
         <img id="orgChart" class="max-w-sm md:max-w-5xl cursor-pointer hover:opacity-80 transition-opacity" 
              src="@Url.Content("~/assets/images/profil/org.png")" 
              alt="Struktur Organisasi DLH DKI Jakarta"
              onclick="openImageModal()">
    </div>
</section>

<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4" onclick="closeImageModal()">
    <div class="relative max-w-full max-h-full">
        <img id="modalImage" class="max-w-full max-h-full object-contain" src="" alt="">
        <button class="absolute top-4 right-4 text-white text-3xl hover:text-gray-300" onclick="closeImageModal()">&times;</button>
    </div>
</div>

<register-block dynamic-section="scripts" key="jsOrganisasi">
<script>
function openImageModal() {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const orgChart = document.getElementById('orgChart');
    
    modalImage.src = orgChart.src;
    modalImage.alt = orgChart.alt;
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Tutup modal dengan tombol ESC
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeImageModal();
    }
});
</script>
</register-block>