{"id":18781,"date":"2026-03-12T12:46:01","date_gmt":"2026-03-12T12:46:01","guid":{"rendered":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/?page_id=18781"},"modified":"2026-03-15T21:32:54","modified_gmt":"2026-03-15T21:32:54","slug":"media","status":"publish","type":"page","link":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/media\/","title":{"rendered":"Media"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">    <style>\n        \/* \u2500\u2500 Wrapper & Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-wrapper { max-width: 1200px; margin: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 10px; }\n        .amh-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }\n        .amh-btn { padding: 12px 25px; cursor: pointer; border-radius: 6px; font-weight: bold; transition: 0.3s; font-size: 15px; }\n        .amh-btn.active { background: #b2040e !important; color: #fff !important; border: none; box-shadow: 0 4px 10px rgba(178,4,14,0.3); }\n        .amh-btn:not(.active) { background: #fff !important; color: #b2040e !important; border: 1px solid #b2040e !important; }\n\n        \/* \u2500\u2500 Home: album card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        #amh-home { padding: 0; }\n        .amh-album-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n            gap: 28px;\n        }\n        .amh-album-card { cursor: pointer; transition: transform 0.2s; user-select: none; }\n        .amh-album-card:hover { transform: translateY(-6px); }\n\n        \/* Folder ear (tab at top-left) *\/\n        .amh-folder-ear {\n            width: 42%;\n            height: 22px;\n            background: #ddd8d0;\n            border-radius: 8px 8px 0 0;\n            margin-left: 8px;\n        }\n        \/* Folder body *\/\n        .amh-folder-body {\n            background: #f0ece6;\n            border-radius: 3px 12px 12px 12px;\n            padding: 10px 10px 14px;\n            box-shadow: 0 5px 14px rgba(0,0,0,0.18);\n        }\n        \/* Photo inside folder *\/\n        .amh-folder-photo {\n            width: 100%;\n            height: 150px;\n            border-radius: 5px;\n            overflow: hidden;\n            background: rgba(255,255,255,0.2);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .amh-folder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }\n        .amh-folder-photo-empty {\n            width: 100%;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n            background: linear-gradient(135deg, #f5e6e6 0%, #ede0e0 100%);\n            color: #c97070;\n        }\n        .amh-folder-photo-empty svg { opacity: 0.55; }\n        .amh-folder-photo-empty span { font-size: 11px; font-weight: 600; color: #b2040e; opacity: 0.6; letter-spacing: 0.4px; }\n        \/* Folder name below the shape *\/\n        .amh-album-name {\n            padding: 10px 4px 0;\n            font-size: 16px;\n            font-weight: 600;\n            color: #444;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            overflow: hidden;\n        }\n        .amh-album-name .amh-folder-icon { flex-shrink: 0; color: #b2040e; }\n        .amh-album-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n        \/* \u2500\u2500 Back button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        #amh-back-btn {\n            display: none;\n            margin-bottom: 14px;\n            padding: 8px 18px;\n            background: #fff;\n            border: 1px solid #b2040e;\n            color: #b2040e;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 13px;\n            font-weight: 600;\n            transition: background 0.15s, color 0.15s;\n        }\n        #amh-back-btn:hover { background: #b2040e; color: #fff; }\n\n        \/* \u2500\u2500 Browse: sidebar + content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-body { display: none; min-height: 400px; gap: 0; }\n        .amh-sidebar {\n            width: 240px;\n            flex-shrink: 0;\n            border-right: 1px solid #eee;\n            padding: 12px 0;\n            overflow-y: auto;\n            max-height: 600px;\n            background: #fafafa;\n        }\n        .amh-content { flex: 1; padding: 16px; min-width: 0; }\n\n        \/* \u2500\u2500 Folder tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-folder-tree { list-style: none; margin: 0; padding: 4px 0; }\n        .amh-folder-tree ul { list-style: none; margin: 0; padding: 0; }\n        .amh-folder-children { display: none; margin-left: 20px; border-left: 1px solid #d8d8d8; padding-left: 0; }\n        .amh-folder-children.expanded { display: block; }\n        .amh-folder-item { display: block; margin: 1px 4px; border-radius: 4px; user-select: none; }\n        .amh-folder-row {\n            display: flex; align-items: center; gap: 5px;\n            padding: 6px 10px 6px 8px; cursor: pointer;\n            border-radius: 4px; transition: background 0.12s; white-space: nowrap;\n        }\n        .amh-folder-row:hover { background: #fde8e9; }\n        .amh-folder-item.active > .amh-folder-row { background: #b2040e; color: #fff; }\n        .amh-folder-item.active > .amh-folder-row .amh-folder-arrow { color: rgba(255,255,255,0.85); }\n        .amh-folder-item.active > .amh-folder-row .amh-folder-icon  { color: #fff; }\n        .amh-folder-item.active > .amh-folder-row .amh-folder-name  { color: #fff; }\n        .amh-folder-arrow {\n            display: inline-flex; align-items: center; justify-content: center;\n            font-size: 9px; color: #b2040e; transition: transform 0.18s;\n            width: 14px; height: 14px; flex-shrink: 0;\n        }\n        .amh-folder-arrow.open   { transform: rotate(90deg); }\n        .amh-folder-arrow.hidden { visibility: hidden; }\n        .amh-folder-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: #b2040e; }\n        .amh-folder-icon svg { display: block; }\n        .amh-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #b2040e; font-weight: 500; }\n        .amh-root-item {\n            padding: 6px 10px; cursor: pointer; font-size: 13px; color: #b2040e; font-weight: 500;\n            border-radius: 4px; margin: 1px 4px; display: flex; align-items: center; gap: 5px;\n            transition: background 0.12s; user-select: none;\n        }\n        .amh-root-item:hover  { background: #fde8e9; }\n        .amh-root-item.active { background: #b2040e; color: #fff; }\n        .amh-sidebar-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #999; }\n\n        \/* \u2500\u2500 Media grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }\n        .amh-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; display: flex; flex-direction: column; }\n        .amh-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }\n        .amh-card img, .amh-card video { width: 100%; height: 200px; object-fit: contain; background: #f4f4f4; display: block; cursor: pointer; border-bottom: 1px solid #f0f0f0; }\n        .amh-label { padding: 12px; font-size: 13px; text-align: center; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; background: #fff; font-weight: 500; }\n        .amh-state-msg { padding: 40px; text-align: center; color: #999; font-size: 15px; }\n        .amh-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid #eee; border-top-color: #b2040e; border-radius: 50%; animation: amh-spin 0.7s linear infinite; vertical-align: middle; margin-right: 8px; }\n        @keyframes amh-spin { to { transform: rotate(360deg); } }\n\n        \/* \u2500\u2500 Pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-pagination { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }\n        .p-num { padding: 8px 16px; border: 1px solid #ddd; background: #fff; cursor: pointer; border-radius: 4px; color: #555; font-weight: 600; transition: 0.2s; }\n        .p-num.active { background: #b2040e !important; color: #fff !important; border-color: #b2040e !important; }\n        .amh-nav-btn { padding: 10px 20px; cursor: pointer; border-radius: 4px; background: #b2040e; color: #fff; border: none; font-weight: bold; }\n        .amh-nav-btn:disabled { background: #ccc; cursor: not-allowed; }\n\n        \/* \u2500\u2500 PDF card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-pdf-card { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; background: #f9f0f0; border-bottom: 1px solid #f0f0f0; cursor: pointer; gap: 6px; text-decoration: none; overflow: hidden; position: relative; }\n        .amh-pdf-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }\n        .amh-pdf-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(178,4,14,0.82); color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 4px 0; letter-spacing: 0.5px; }\n        .amh-pdf-icon { color: #b2040e; }\n        .amh-pdf-label { font-size: 12px; color: #b2040e; font-weight: 600; }\n\n        \/* \u2500\u2500 Lightbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        .amh-lightbox { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); justify-content: center; align-items: center; padding: 20px; }\n        .amh-lightbox-content { max-width: 95%; max-height: 90%; border-radius: 4px; box-shadow: 0 0 30px rgba(255,255,255,0.1); object-fit: contain; }\n        .amh-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 45px; font-weight: bold; cursor: pointer; line-height: 1; }\n\n        \/* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n        @media (max-width: 768px) {\n            .amh-album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }\n            .amh-folder-photo { height: 110px; }\n            .amh-body { flex-direction: column; }\n            .amh-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; max-height: 200px; }\n        }\n    <\/style>\n\n    <div class=\"amh-wrapper\">\n\n        <!-- Lightbox -->\n        <div id=\"amh-lightbox\" class=\"amh-lightbox\" onclick=\"amhCloseLightbox(event)\">\n            <span class=\"amh-close\" onclick=\"amhCloseLightbox(null, true)\">&times;<\/span>\n            <img decoding=\"async\" id=\"amh-full-img\" class=\"amh-lightbox-content\" src=\"\" alt=\"\">\n        <\/div>\n\n        <!-- Tabs -->\n        <div class=\"amh-tabs\">\n            <button class=\"amh-btn active\" data-tab=\"photos\">Photos<\/button>\n            <button class=\"amh-btn\"        data-tab=\"videos\">Videos<\/button>\n            <button class=\"amh-btn\"        data-tab=\"news\">News<\/button>\n        <\/div>\n\n        <!-- Home: big album cards -->\n        <div id=\"amh-home\">\n            <div id=\"amh-album-cards\" class=\"amh-album-grid\"><\/div>\n        <\/div>\n\n        <!-- Back button (shown in browse mode) -->\n        <button id=\"amh-back-btn\">&#8592; All Albums<\/button>\n\n        <!-- Browse: sidebar tree + media grid -->\n        <div class=\"amh-body\" id=\"amh-body\">\n            <div class=\"amh-sidebar\">\n                <div class=\"amh-sidebar-label\">Albums<\/div>\n                <ul id=\"amh-folder-tree\" class=\"amh-folder-tree\">\n                    <li class=\"amh-root-item\" id=\"amh-ungrouped\" data-folder-id=\"0\">&#128247; All Media<\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"amh-content\">\n                <div id=\"amh-grid\" class=\"amh-grid\"><\/div>\n                <div class=\"amh-pagination\" id=\"amh-pagination\">\n                    <button id=\"amh-prev\" class=\"amh-nav-btn\" disabled>Previous<\/button>\n                    <div id=\"amh-pages\" style=\"display:flex; gap:5px; flex-wrap:wrap;\"><\/div>\n                    <button id=\"amh-next\" class=\"amh-nav-btn\" disabled>Next<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\n    <script>\n    (function () {\n        'use strict';\n\n        if (typeof pdfjsLib !== 'undefined') {\n            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\n        }\n\n        function renderPdfThumbnails() {\n            if (typeof pdfjsLib === 'undefined') return;\n            var canvases = gridEl.querySelectorAll('.amh-pdf-thumb[data-pdf-src]');\n            canvases.forEach(function (canvas) {\n                var url = canvas.getAttribute('data-pdf-src');\n                pdfjsLib.getDocument(url).promise.then(function (pdf) {\n                    return pdf.getPage(1);\n                }).then(function (page) {\n                    var card = canvas.closest('.amh-pdf-card');\n                    var w    = card ? card.offsetWidth : 220;\n                    var vp   = page.getViewport({ scale: 1 });\n                    var scale = w \/ vp.width;\n                    var scaled = page.getViewport({ scale: scale });\n                    canvas.width  = scaled.width;\n                    canvas.height = scaled.height;\n                    page.render({ canvasContext: canvas.getContext('2d'), viewport: scaled });\n                }).catch(function () {\n                    \/* fallback: hide canvas, badge already visible *\/\n                    canvas.style.display = 'none';\n                });\n            });\n        }\n\n        var AMH_AJAX   = \"https:\\\/\\\/buwebsite.azurewebsites.net\\\/projectnami\\\/wp-admin\\\/admin-ajax.php\";\n        var AMH_NONCE  = \"6c3b31c72b\";\n        var amhPerPage = 12;\n\n        var amhTab      = 'photos';\n        var amhFolderId = 0;\n        var amhPage     = 1;\n\n        var homeEl      = document.getElementById('amh-home');\n        var bodyEl      = document.getElementById('amh-body');\n        var backBtn     = document.getElementById('amh-back-btn');\n        var cardsEl     = document.getElementById('amh-album-cards');\n        var gridEl      = document.getElementById('amh-grid');\n        var pagesEl     = document.getElementById('amh-pages');\n        var prevBtn     = document.getElementById('amh-prev');\n        var nextBtn     = document.getElementById('amh-next');\n        var treeRootEl  = document.getElementById('amh-folder-tree');\n        var ungroupedEl = document.getElementById('amh-ungrouped');\n        var tabBtns     = document.querySelectorAll('.amh-tabs .amh-btn');\n\n        function ajaxPost(action, data, callback) {\n            var body = new URLSearchParams();\n            body.append('action', action);\n            body.append('_ajax_nonce', AMH_NONCE);\n            for (var k in data) {\n                if (Object.prototype.hasOwnProperty.call(data, k)) body.append(k, data[k]);\n            }\n            fetch(AMH_AJAX, { method: 'POST', body: body })\n                .then(function (r) { return r.json(); })\n                .then(function (j) { if (j.success) callback(null, j.data); else callback(j.data || 'Error', null); })\n                .catch(function (e) { callback(e, null); });\n        }\n\n        function amhFolderSvg(open) {\n            if (open) {\n                return '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">'\n                     + '<path d=\"M20 6h-8l-2-2H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z\"\/>'\n                     + '<\/svg>';\n            }\n            return '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">'\n                 + '<path d=\"M10 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8L10 4z\"\/>'\n                 + '<\/svg>';\n        }\n        function amhFolderSvgBig() {\n            return '<svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"currentColor\">'\n                 + '<path d=\"M10 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8L10 4z\"\/>'\n                 + '<\/svg>';\n        }\n        function amhEsc(str) {\n            if (!str) return '';\n            return String(str).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;').replace(\/'\/g,'&#039;');\n        }\n        function amhScrollToTop() {\n            var w = document.querySelector('.amh-wrapper');\n            if (w) w.scrollIntoView({ behavior: 'smooth' });\n        }\n\n        \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HOME MODE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        function showHome() {\n            homeEl.style.display  = '';\n            bodyEl.style.display  = 'none';\n            backBtn.style.display = 'none';\n            amhFolderId = 0;\n            amhPage     = 1;\n            loadAlbums(amhTab);\n        }\n\n        function loadAlbums(tab) {\n            cardsEl.innerHTML = '<div class=\"amh-state-msg\"><span class=\"amh-spinner\"><\/span>Loading albums...<\/div>';\n            ajaxPost('amh_get_folders', { tab: tab, parent_id: 0, include_preview: 1 }, function (err, folders) {\n                cardsEl.innerHTML = '';\n                if (err || !folders || folders.length === 0) {\n                    cardsEl.innerHTML = '<div class=\"amh-state-msg\">No albums found.<\/div>';\n                    return;\n                }\n                folders.forEach(function (folder) {\n                    var card = document.createElement('div');\n                    card.className = 'amh-album-card';\n                    var photoInner = folder.preview_url\n                        ? '<img decoding=\"async\" src=\"' + amhEsc(folder.preview_url) + '\" loading=\"lazy\" alt=\"' + amhEsc(folder.name) + '\">'\n                        : '<div class=\"amh-folder-photo-empty\">' + amhFolderSvgBig() + '<span>No preview<\/span><\/div>';\n                    card.innerHTML =\n                        '<div class=\"amh-folder-ear\"><\/div>' +\n                        '<div class=\"amh-folder-body\">' +\n                            '<div class=\"amh-folder-photo\">' + photoInner + '<\/div>' +\n                        '<\/div>' +\n                        '<div class=\"amh-album-name\">' +\n                            '<span class=\"amh-folder-icon\">' + amhFolderSvg(false) + '<\/span>' +\n                            '<span class=\"amh-album-name-text\">' + amhEsc(folder.name) + '<\/span>' +\n                        '<\/div>';\n                    card.addEventListener('click', function () { showBrowse(folder.id); });\n                    cardsEl.appendChild(card);\n                });\n            });\n        }\n\n        \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BROWSE MODE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        function showBrowse(folderId) {\n            homeEl.style.display  = 'none';\n            bodyEl.style.display  = 'flex';\n            backBtn.style.display = '';\n            amhFolderId = folderId;\n            amhPage     = 1;\n\n            clearTree();\n            loadFolders(amhTab, 0, treeRootEl, function () {\n                if (folderId > 0) {\n                    var item = treeRootEl.querySelector('[data-folder-id=\"' + folderId + '\"].amh-folder-item');\n                    if (item) setActiveFolder(item);\n                } else {\n                    setActiveFolder(null);\n                    ungroupedEl.classList.add('active');\n                }\n            });\n            loadMedia();\n        }\n\n        function clearTree() {\n            while (treeRootEl.lastChild && treeRootEl.lastChild !== ungroupedEl) {\n                treeRootEl.removeChild(treeRootEl.lastChild);\n            }\n            if (treeRootEl.firstChild !== ungroupedEl) {\n                treeRootEl.insertBefore(ungroupedEl, treeRootEl.firstChild);\n            }\n            ungroupedEl.classList.remove('active');\n        }\n\n        function loadFolders(tab, parentId, containerEl, afterLoad) {\n            ajaxPost('amh_get_folders', { tab: tab, parent_id: parentId }, function (err, folders) {\n                if (err || !folders || folders.length === 0) {\n                    if (afterLoad) afterLoad();\n                    return;\n                }\n                folders.forEach(function (folder) {\n                    var li = document.createElement('li');\n                    li.className = 'amh-folder-item';\n                    li.setAttribute('data-folder-id', folder.id);\n                    li.setAttribute('data-loaded', '0');\n\n                    var arrowHtml = folder.has_children\n                        ? '<span class=\"amh-folder-arrow\">&#9658;<\/span>'\n                        : '<span class=\"amh-folder-arrow hidden\">&#9658;<\/span>';\n\n                    var row = document.createElement('div');\n                    row.className = 'amh-folder-row';\n                    row.innerHTML = arrowHtml\n                        + '<span class=\"amh-folder-icon\">' + amhFolderSvg(false) + '<\/span>'\n                        + '<span class=\"amh-folder-name\">' + amhEsc(folder.name) + '<\/span>';\n                    li.appendChild(row);\n\n                    row.addEventListener('click', function (e) {\n                        e.stopPropagation();\n                        var arrowEl    = row.querySelector('.amh-folder-arrow');\n                        var iconEl     = row.querySelector('.amh-folder-icon');\n                        var childrenUl = li.querySelector('.amh-folder-children');\n                        setActiveFolder(li);\n                        amhFolderId = folder.id;\n                        amhPage     = 1;\n                        loadMedia();\n                        if (folder.has_children) {\n                            if (childrenUl) {\n                                var isOpen = childrenUl.classList.toggle('expanded');\n                                arrowEl.classList.toggle('open', isOpen);\n                                iconEl.innerHTML = isOpen ? amhFolderSvg(true) : amhFolderSvg(false);\n                            } else if (li.getAttribute('data-loaded') === '0') {\n                                li.setAttribute('data-loaded', '1');\n                                var ul = document.createElement('ul');\n                                ul.className = 'amh-folder-children expanded';\n                                li.appendChild(ul);\n                                arrowEl.classList.add('open');\n                                iconEl.innerHTML = amhFolderSvg(true);\n                                loadFolders(amhTab, folder.id, ul);\n                            }\n                        }\n                    });\n                    containerEl.appendChild(li);\n                });\n                if (afterLoad) afterLoad();\n            });\n        }\n\n        function setActiveFolder(el) {\n            treeRootEl.querySelectorAll('.amh-folder-item').forEach(function (i) { i.classList.remove('active'); });\n            ungroupedEl.classList.remove('active');\n            if (el) el.classList.add('active');\n        }\n\n        function loadMedia() {\n            gridEl.innerHTML  = '<div class=\"amh-state-msg\"><span class=\"amh-spinner\"><\/span>Loading...<\/div>';\n            pagesEl.innerHTML = '';\n            prevBtn.disabled  = true;\n            nextBtn.disabled  = true;\n            ajaxPost('amh_get_media', {\n                folder_id: amhFolderId, tab: amhTab, page: amhPage, per_page: amhPerPage\n            }, function (err, data) {\n                if (err || !data) { gridEl.innerHTML = '<div class=\"amh-state-msg\">Could not load media.<\/div>'; return; }\n                renderMedia(data.items);\n                renderPagination(data.pages);\n                renderPdfThumbnails();\n            });\n        }\n\n        function renderMedia(items) {\n            gridEl.innerHTML = '';\n            if (!items || items.length === 0) {\n                gridEl.innerHTML = '<div class=\"amh-state-msg\">No media found in this folder.<\/div>';\n                return;\n            }\n            items.forEach(function (item) {\n                var card        = document.createElement('div');\n                card.className  = 'amh-card';\n                var displayName = item.file_name.replace(\/\\.[^.]+$\/, '');\n                var isPdf       = item.file_name.toLowerCase().endsWith('.pdf');\n                var mediaHtml;\n\n                if (item.type === 'videos') {\n                    mediaHtml = '<video controls preload=\"metadata\"><source src=\"' + amhEsc(item.url) + '\" type=\"video\/mp4\"><\/video>';\n                } else if (isPdf) {\n                    mediaHtml = '<a class=\"amh-pdf-card\" href=\"' + amhEsc(item.url) + '\" target=\"_blank\" rel=\"noopener\">'\n                        + '<canvas class=\"amh-pdf-thumb\" data-pdf-src=\"' + amhEsc(item.url) + '\"><\/canvas>'\n                        + '<span class=\"amh-pdf-badge\">PDF \u2014 Click to open<\/span>'\n                        + '<\/a>';\n                } else {\n                    mediaHtml = '<img decoding=\"async\" src=\"' + amhEsc(item.url) + '\" loading=\"lazy\" alt=\"' + amhEsc(displayName) + '\">';\n                }\n\n                card.innerHTML = mediaHtml + '<div class=\"amh-label\" title=\"' + amhEsc(item.file_name) + '\">' + amhEsc(displayName) + '<\/div>';\n\n                if (item.type !== 'videos' && !isPdf) {\n                    var img = card.querySelector('img');\n                    (function (url) { img.addEventListener('click', function () { amhOpenLightbox(url); }); })(item.url);\n                }\n                gridEl.appendChild(card);\n            });\n        }\n\n        function renderPagination(totalPages) {\n            pagesEl.innerHTML = '';\n            var startPage = Math.max(1, amhPage - 2);\n            var endPage   = Math.min(totalPages, startPage + 4);\n            if (endPage - startPage < 4) startPage = Math.max(1, endPage - 4);\n            for (var i = startPage; i <= endPage; i++) {\n                (function (n) {\n                    var btn = document.createElement('button');\n                    btn.textContent = n;\n                    btn.className   = (n === amhPage) ? 'p-num active' : 'p-num';\n                    btn.addEventListener('click', function () { amhPage = n; loadMedia(); amhScrollToTop(); });\n                    pagesEl.appendChild(btn);\n                })(i);\n            }\n            prevBtn.disabled = (amhPage <= 1);\n            nextBtn.disabled = (amhPage >= totalPages || totalPages === 0);\n        }\n\n        function amhOpenLightbox(url) {\n            document.getElementById('amh-full-img').src = url;\n            document.getElementById('amh-lightbox').style.display = 'flex';\n        }\n        window.amhCloseLightbox = function (e, force) {\n            if (force || (e && e.target === document.getElementById('amh-lightbox'))) {\n                document.getElementById('amh-lightbox').style.display = 'none';\n                document.getElementById('amh-full-img').src = '';\n            }\n        };\n\n        tabBtns.forEach(function (btn) {\n            btn.addEventListener('click', function () {\n                tabBtns.forEach(function (b) { b.classList.remove('active'); });\n                btn.classList.add('active');\n                amhTab = btn.getAttribute('data-tab');\n                showHome();\n            });\n        });\n\n        backBtn.addEventListener('click', function () { showHome(); });\n\n        ungroupedEl.addEventListener('click', function () { showHome(); });\n\n        prevBtn.addEventListener('click', function () {\n            if (amhPage > 1) { amhPage--; loadMedia(); amhScrollToTop(); }\n        });\n        nextBtn.addEventListener('click', function () {\n            amhPage++; loadMedia(); amhScrollToTop();\n        });\n\n        document.addEventListener('DOMContentLoaded', function () { showHome(); });\n\n    })();\n    <\/script>\n    \n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18781","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/pages\/18781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/comments?post=18781"}],"version-history":[{"count":2,"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/pages\/18781\/revisions"}],"predecessor-version":[{"id":18814,"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/pages\/18781\/revisions\/18814"}],"wp:attachment":[{"href":"https:\/\/buwebsite.azurewebsites.net\/projectnami\/wp-json\/wp\/v2\/media?parent=18781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}