{% extends "layout.html" %}
{% load static %}
{% load thumbnail_filters %}
{% load query_transform %}


{% block layout_script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- PDF.js (untuk thumbnail PDF) -->
<script src="{% static 'libs/pdfjs/pdf.min.js' %}"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'libs/pdfjs/pdf.worker.min.js' %}";
</script>

<script>
(() => {
    const $form = $('#list_form_find');

    // Set initial values
    $form.find('[data-skpd]').val('{{ search_skpd_dg }}');
    // Mengatur nilai awal (initial value)
    $form.find('[data-category]').val('{{ search_kategori|default:'' }}'); // 🔥 PERBAIKAN DI SINI
    $form.find('[data-tahun]').val('{{ search_tahun }}');
    $form.find('[data-term]').val('{{ term_current }}');
    $('#item_list').val('{{ show }}');
    $('#sorting').val('{{ sorting }}');

    // Display mode buttons
    if ("{{ display }}" === 'list') {
      $('#btn_list').addClass('btn-active');
      $('#btn_col').removeClass('btn-active');
    } else {
      $('#btn_list').removeClass('btn-active');
      $('#btn_col').addClass('btn-active');
    }

    // ==============================
    // 🔍 SEARCH BUTTON
    // ==============================
    $('#searchButton').on('click', function () {
        const searchTerm = $('#searchTerm').val().trim();

        if (searchTerm) {
            $('#searchMode').val('semantic'); // gunakan semantic search
        } else {
            $('#searchMode').val('meta'); // gunakan filter meta biasa
        }

        return true;
    });
})();
</script>

<!-- ====================== -->
<!-- PDF Thumbnail Renderer -->
<!-- ====================== -->
<script>
document.addEventListener("DOMContentLoaded", async () => {
    const pdfThumbs = document.querySelectorAll("img[id^='pdf-thumb-']");

    for (const img of pdfThumbs) {
      const url = img.dataset.pdfUrl;

      try {
        const loadingTask = pdfjsLib.getDocument(url);
        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(1);

        const viewport = page.getViewport({ scale: 1.0 });
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise;

        img.src = canvas.toDataURL("image/jpeg", 0.8);
      } catch (err) {
        console.error("Gagal render thumbnail PDF:", url, err);
        img.outerHTML = `<div class="text-danger p-2">Tidak bisa tampilkan PDF</div>`;
      }
    }
});
</script>
<script>


  function redir_disp(a) {
    window.location.href =
      "{{ search_kategori }}?term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp=" + a + "&item_jml={{ show }}&sorting={{ sorting }}";
  }
  
  function redir_sorting(a) {
    window.location.href =
      "{{ search_kategori }}?term={{ term_current }}&pk_skpd_dg={{ search_skpd_dg }}&tahun={{ search_tahun }}&disp={{ display }}&item_jml={{ show }}&sorting=" + a.value;
  }

    function redir_list(a) {
    const category = '{{ search_kategori|default:"" }}';
    const basePath = category ? `/berkas/list/${category}` : '/berkas/list';
    const params = new URLSearchParams({
      term: '{{ term_current|default:"" }}',
      pk_skpd_dg: '{{ search_skpd_dg|default:"" }}',
      tahun: '{{ search_tahun|default:"" }}',
      disp: '{{ display|default:"list" }}',
      item_jml: a.value
    });
    window.location.href = `${basePath}?${params.toString()}`;
  }

function reset_page() {
    // Kosongkan semua filter
    $('#list_form_find').find('input[type="text"]').val('');
    $('#list_form_find').find('input[type="number"]').val('');
    $('#list_form_find').find('select').prop('selectedIndex', 0);
    $('#list_form_find').find('input[type="radio"]').prop('checked', false);

    // Default type = all
    $('input[name="type"][value="all"]').prop('checked', true);

    // Clear semantic search
    $('#searchTerm').val('');
    $('#searchMode').val('');

    // Redirect hard ke halaman awal (tanpa query params)
    window.location.href = "{% url 'content_list' %}";
}
</script>
<script>
function reset_page() {
    // Kosongkan semua filter
    $('#list_form_find').find('input[type="text"]').val('');
    $('#list_form_find').find('input[type="number"]').val('');
    $('#list_form_find').find('select').prop('selectedIndex', 0);
    $('#list_form_find').find('input[type="radio"]').prop('checked', false);

    // Default type = all
    $('input[name="type"][value="all"]').prop('checked', true);

    // Clear semantic search
    $('#searchTerm').val('');
    $('#searchMode').val('');

    // Redirect hard ke halaman awal (tanpa query params)
    window.location.href = "{% url 'content_list' %}";
}
</script>

<!-- ====================== -->
<!-- Cetak COL Footer -->
<!-- ====================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
<script>
  function previewPDF(fileUrl, event) {
    if (event) event.stopPropagation();

    if (!fileUrl) {
      alert("Berkas tidak ditemukan.");
      return;
    }

    const lowerUrl = fileUrl.toLowerCase();
    const isImage = lowerUrl.endsWith(".jpg") || lowerUrl.endsWith(".jpeg") || lowerUrl.endsWith(".png");
    const isDocx = lowerUrl.endsWith(".docx");

    const previewModal = document.createElement('div');
    previewModal.id = 'dynamic-preview-modal';
    Object.assign(previewModal.style, {
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      backgroundColor: 'white',
      padding: '20px',
      boxShadow: '0 0 20px rgba(0, 0, 0, 0.4)',
      zIndex: '99999',
      width: '900px',
      height: '650px',
      maxWidth: '90vw',
      maxHeight: '90vh',
      overflow: 'hidden',
      borderRadius: '10px',
      display: 'flex',
      flexDirection: 'column'
    });

    const fileName = fileUrl.split('/').pop();
    const header = document.createElement('div');
    header.textContent = `Preview: ${decodeURIComponent(fileName)}`;
    Object.assign(header.style, {
      fontSize: "14px",
      fontWeight: "bold",
      marginBottom: "15px",
      paddingRight: "30px",
      borderBottom: "1px solid #eee",
      paddingBottom: "8px"
    });
    previewModal.appendChild(header);

    const contentArea = document.createElement('div');
    Object.assign(contentArea.style, {
      flex: '1',
      overflowY: 'auto',
      width: '100%',
      textAlign: 'center'
    });
    previewModal.appendChild(contentArea);

    if (isImage) {
      const img = document.createElement('img');
      img.src = fileUrl;
      img.style.maxWidth = "100%";
      img.style.maxHeight = "100%";
      img.style.objectFit = "contain";
      contentArea.appendChild(img);

    } else if (isDocx) {
      Object.assign(contentArea.style, {
        textAlign: 'left',
        padding: '15px',
        border: '1px solid #ccc',
        borderRadius: '5px',
        backgroundColor: '#fafafa',
        fontSize: '11px',
        lineHeight: '1.6'
      });
      contentArea.textContent = "Sedang membaca dokumen Word...";

      if (typeof mammoth !== 'undefined') {
        fetch(fileUrl)
          .then(res => {
            if(!res.ok) throw new Error("File gagal di-fetch server");
            return res.arrayBuffer();
          })
          .then(arrayBuffer => mammoth.convertToHtml({ arrayBuffer }))
          .then(result => {
            contentArea.innerHTML = result.value || "⚠️ Dokumen kosong atau tidak ada teks yang bisa diekstrak.";
          })
          .catch(err => {
            contentArea.textContent = "❌ Gagal memuat konten DOCX: " + err.message;
          });
      } else {
        contentArea.innerHTML = `⚠️ Library Mammoth.js belum dimuat di halaman list.html.<br><br><a href="${fileUrl}" target="_blank" class="btn btn-primary btn-sm">Buka Langsung Berkas</a>`;
      }

    } else {
      const iframe = document.createElement('iframe');
      iframe.src = fileUrl;
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      iframe.style.border = 'none';
      contentArea.appendChild(iframe);
    }

    const downloadBtn = document.createElement('a');
    downloadBtn.textContent = "⬇️ Unduh Berkas";
    Object.assign(downloadBtn.style, {
      display: "block",
      padding: "8px 16px",
      backgroundColor: "#2187DA",
      color: "white",
      fontSize: "12px",
      fontWeight: "bold",
      borderRadius: "5px",
      textDecoration: "none",
      margin: "15px auto 0 auto",
      width: "fit-content",
      textAlign: "center",
      cursor: "pointer"
    });
    downloadBtn.onclick = async () => {
      try {
        const response = await fetch(fileUrl);
        const blob = await response.blob();
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = fileName;
        a.click();
        URL.revokeObjectURL(a.href);
      } catch (err) {
        window.open(fileUrl, '_blank');
      }
    };
    previewModal.appendChild(downloadBtn);

    const closeButton = document.createElement('button');
    closeButton.innerHTML = '&times;';
    closeButton.onclick = () => document.body.removeChild(previewModal);
    Object.assign(closeButton.style, {
      position: 'absolute',
      top: '8px',
      right: '12px',
      fontSize: '24px',
      background: 'transparent',
      color: '#666',
      border: 'none',
      cursor: 'pointer',
    });
    previewModal.appendChild(closeButton);

    document.body.appendChild(previewModal);
  }
</script>

<script>
  // Fungsi penangan klik tombol Download di Card Footer
  function triggerDynamicPreview(pk, event) {
      if (event) event.stopPropagation();
      const btn = document.getElementById('download-btn-' + pk);
      if (btn) {
          const activePath = btn.getAttribute('data-active-path');
          // Memanggil fungsi modal previewPDF bawaan Anda
          if (typeof previewPDF === 'function') {
              previewPDF(activePath, event);
          } else {
              window.open(activePath, '_blank');
          }
      }
  }

  // Logika pelacak pergeseran gambar Carousel yang akurat per Dokumen
  $(document).ready(function() {
      // Event terpicu tepat setelah transisi slide selesai berganti gambar
      $('.carousel').on('slid.bs.carousel', function (e) {
          const $currentCarousel = $(e.currentTarget);
          const carouselId = $currentCarousel.attr('id');
          
          if (!carouselId) return;
          
          // Ambil PK asli dari elemen carousel yang bergeser
          const pk = carouselId.replace('carousel-', '');
          
          // Dapatkan urutan indeks item slide gambar yang sedang aktif (0, 1, 2, dst)
          const activeIndex = $currentCarousel.find('.carousel-item.active').index();
          
          // Ambil tombol pasangannya yang berada di card-footer
          const $downloadBtn = $('#download-btn-' + pk);
          
          if ($downloadBtn.length && activeIndex !== -1) {
              try {
                  // Baca kembali seluruh list file yang sudah dipersiapkan di HTML tag
                  const allFiles = JSON.parse($downloadBtn.attr('data-all-files'));
                  const currentFile = allFiles[activeIndex];
                  
                  if (currentFile) {
                      // Ganti path target file download secara real-time mengikuti slide gambar
                      $downloadBtn.attr('data-active-path', currentFile.path);
                  }
              } catch (err) {
                  console.error("Gagal sinkronisasi data file untuk dokumen PK " + pk + ":", err);
              }
          }
      });
  });
</script>

{% endblock %}



{% block layout_content %}
<div class="card my-3" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
  <div class="card-body">

    <!-- Form pencarian -->
    <form id="list_form_find" method="GET" action="{% url 'content_list' %}" class="mb-3">
      <input type="hidden" name="searchMode" id="searchMode" value="">

      <div class="form-row align-items-start">
        <!-- Form kiri -->
        <div class="col">
          <!-- Baris 1 -->
          <div class="form-row mb-2">
            <div class="col-md-3">
              <select class="form-control" data-skpd name="pk_skpd_dg">
                <option value="">Pilih Semua SKPD</option>
                {% for i in skpd_list %}
                  <option value="{{ i.pk }}">{{ i.urai }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
          <select data-category class="form-control" name="pk_categories" id="select_kategori">
            <option value="">Semua Kategori</option>
            {% for i in categories_list %}
              {% include "catetree/form_parents_option.html" with sups=i current=search_kategori|default:0|add:0 %}
            {% endfor %}
          </select>
            </div>
            <div class="col-md-2">
              <input data-tahun name="tahun" placeholder="Tahun" class="form-control">
            </div>
            <div class="col-md-2">
              <input data-term name="term" value="{{ term_current }}" placeholder="Cari Judul Berkas ..." class="form-control">
            </div>
            <div class="col-md-2">
              <input data-tag name="tag" value="{{ search_tag }}" placeholder="Cari Tag" class="form-control">
            </div>
          </div>

          <!-- Baris 2 -->
          <div class="form-row mb-2">
            <div class="col-md-4 d-flex">
              <input id="searchTerm" name="searchTerm" class="form-control mr-2" placeholder="Cari Teks di PDF / JPG...">
              <div class="d-flex align-items-center">
                <label class="mr-2 mb-0 text-center">
                  <input type="radio" name="type" value="pdf">
                  <i class="fas fa-file-pdf"></i>
                </label>
                <label class="mr-2 mb-0 text-center">
                  <input type="radio" name="type" value="image">
                  <i class="fas fa-image"></i>
                </label>
                <label class="mb-0 text-center">
                  <input type="radio" name="type" value="all" checked> all
                </label>
              </div>
            </div>

            <div class="col-md-2 d-flex align-items-center justify-content-center">
              <label class="mr-2 mb-0">Mode</label>
              <button id="btn_list" type="button" class="btn btn-sm btn-light mr-1" onclick="redir_disp('list')">
                <i class="fas fa-bars"></i>
              </button>
              <button id="btn_col" type="button" class="btn btn-sm btn-light" onclick="redir_disp('col')">
                <i class="fas fa-grip-horizontal"></i>
              </button>
            </div>

            <div class="col-md-2 d-flex">
              <label class="mr-2 mb-0 align-self-center">Jumlah</label>
              <select id="item_list" class="form-control" onchange="redir_list(this)">
                <option value="4"  {% if show == 4 %}selected{% endif %}>4</option>
                <option value="8"  {% if show == 8 %}selected{% endif %}>8</option>
                <option value="12" {% if show == 12 %}selected{% endif %}>12</option>
                <option value="16" {% if show == 16 %}selected{% endif %}>16</option>
                <option value="20" {% if show == 20 %}selected{% endif %}>20</option>
              </select>
            </div>

            <div class="col-md-4 d-flex">
              <label class="mr-2 mb-0 align-self-center">Sortir</label>
              <select id="sorting" class="form-control" onchange="redir_sorting(this)">
                <option value="desc">Berkas Terbaru</option>
                <option value="asc">Berkas Terlama</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Tombol kanan -->
        <div class="col-auto d-flex flex-column pl-0">
          <button type="submit" class="btn btn-primary mb-2" id="searchButton">
            <i class="fa fa-search"></i> Cari
          </button>
          <button type="button" onclick="reset_page()" class="btn btn-warning">
            <i class="fa fa-undo"></i> Reset
          </button>
        </div>
      </div>
    </form>

    {% include 'extra/base_messages.html' %}

    {% if list|length %}
      {% if display == 'list' %}
        <!-- LIST VIEW -->
        <ul class="list-unstyled">
          {% for i in list %}
            {% if i.attachments_list %}
              {% with i.attachments_list|last as latest_attachment %}
                <li class="media border-bottom mb-1 pb-1" data-url="{% static latest_attachment.path %}">
                  <div class="media-body clearfix py-2">
                    <h5 class="mt-0 mb-1 font-weight-bold">
                      {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                        <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}">{{ i.judul }}</a>
                      {% else %}
                        <a href="{% url 'content_item' pk=i.pk %}">{{ i.judul }}</a>
                      {% endif %}
                    </h5>
                    <p class="m-0">{{ i.deskripsi|truncatewords:32 }}</p>

                    {% if i.attachments_list %}
                      <!-- {% for attachment in i.attachments_list %}
                        {% if attachment.path|lower|slice:"-4:" == ".pdf" %}
                          <a href="#"
                            class="text-dark pdf-link"
                            data-toggle="modal"
                            data-target="#pdfPreviewModal"
                            data-pdfurl="{% static attachment.path %}">
                            {{ attachment.name }}
                          </a>
                        {% else %}
                          <a href="#"
                            class="text-dark img-link"
                            data-toggle="modal"
                            data-target="#imgPreviewModal"
                            data-imgurl="{% static attachment.path %}">
                            {{ attachment.name }}
                          </a>
                        {% endif %}
                        <br>
                      {% endfor %} -->

                      <span class="float-right font-italic text-muted">
                        Ada {{ i.attachments_list|length }} Lampiran
                      </span>
                    {% else %}
                      <span class="float-right font-italic text-muted">
                        Tidak Ada Lampiran
                      </span>
                    {% endif %}
                  </div>
                </li>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </ul>

        {% elif display == 'col' %}
        <div class="row">
          {% for i in list %}
            <div class="col-md-3 mb-4 d-flex align-items-stretch">
              
              {% if i.attachments_list and i.attachments_list|length > 1 %}
                <div id="carousel-card-{{ i.pk }}" class="carousel slide w-100" data-ride="carousel" data-bs-ride="carousel" data-interval="2000" data-bs-interval="2000" style="position: relative;">
                  <div class="carousel-inner h-100">
                    {% for attachment in i.attachments_list %}
                      <div class="carousel-item h-100 {% if forloop.first %}active{% endif %}">
                        
                        <div class="card h-100 border-0 shadow-sm" style="overflow: hidden;">
                          
                          <div style="background-color: #f8f9fa; width: 100%; height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                            <img src="{% static 'resources/' %}{{ attachment.path|thumbnail_path }}"
                                 class="d-block w-100 p-1"
                                 style="height: 100%; object-fit: contain;"
                                 alt="Thumbnail"
                                 loading="lazy"
                                 onerror="this.onerror=null;this.src='{% static 'upload/logo.png' %}'">
                          </div>

                          <div class="text-center px-2 pt-2 bg-light border-bottom">
                            <p class="text-truncate text-muted small mb-2" style="font-weight: 600; font-size: 11px; margin-bottom: 6px;" title="{{ attachment.name }}">
                              <i class="fa fa-file-text-o"></i> {{ attachment.name }}
                            </p>
                          </div>
                          
                          <div class="card-body" style="padding: 8px 12px; height: 95px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 20;">
                            <h5 class="card-title font-weight-bold" style="font-size: 13px; margin-bottom: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 34px;" title="{{ i.judul }}">
                              {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                                <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}" style="position: relative; z-index: 21;">{{ i.judul }}</a>
                              {% else %}
                                <a href="{% url 'content_item' pk=i.pk %}" style="position: relative; z-index: 21;">{{ i.judul }}</a>
                              {% endif %}
                            </h5>
                            <p class="card-text text-muted" style="margin-bottom: 0; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ i.deskripsi|truncatewords:8 }}</p>
                          </div>

                          <div class="card-footer d-flex justify-content-between align-items-center" style="padding: 6px 12px; background-color: #fff; border-top: 1px solid #eee;">
                            <span onclick="previewPDF('{% static 'resources/' %}{{ attachment.path }}', event)" 
                                  class="text-primary font-weight-bold"
                                  style="cursor: pointer; position: relative; z-index: 10; font-size: 11px; text-decoration: none;"
                                  onmouseover="this.style.textDecoration='none'" 
                                  onmouseout="this.style.textDecoration='none'">
                              <i class="fa fa-download"></i> Download Lampiran {{ forloop.counter }}
                            </span>
                            <small class="text-muted font-italic" style="font-size: 10px;">
                              Lampiran {{ forloop.counter }} / {{ i.attachments_list|length }}
                            </small>
                          </div>

                        </div> 
                      </div>
                    {% endfor %}
                  </div>

                  <a class="carousel-control-prev" href="#carousel-card-{{ i.pk }}" 
                    data-target="#carousel-card-{{ i.pk }}" data-bs-target="#carousel-card-{{ i.pk }}" 
                    data-slide="prev" data-bs-slide="prev" 
                    style="width: 15%; height: 180px; z-index: 15;">
                    <span class="carousel-control-prev-icon" aria-hidden="true" style="filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.5)) invert(100%);"></span>
                    <span class="sr-only visually-hidden">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carousel-card-{{ i.pk }}" 
                    data-target="#carousel-card-{{ i.pk }}" data-bs-target="#carousel-card-{{ i.pk }}" 
                    data-slide="next" data-bs-slide="next" style="width: 15%; height: 180px; z-index: 15;">
                    <span class="carousel-control-next-icon" aria-hidden="true" 
                    style="filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.5)) invert(100%);"></span>
                    <span class="sr-only visually-hidden">Next</span>
                  </a>
                </div>

              {% elif i.attachments_list and i.attachments_list|length == 1 %}
                <div class="card h-100 w-100 border-0 shadow-sm" style="overflow: hidden;">
                  <div style="background-color: #f8f9fa; width: 100%; height: 380px; display: flex; align-items: center; justify-content: center;">
                    <img src="{% static 'resources/' %}{{ i.attachments_list.0.path|thumbnail_path }}"
                         class="d-block w-100 p-1"
                         style="height: 100%; object-fit: contain;"
                         alt="Thumbnail"
                         loading="lazy"
                         onerror="this.onerror=null;this.src='{% static 'upload/logo.png' %}'">
                  </div>
                  <div class="text-center px-2 pt-2 bg-light border-bottom">
                    <p class="text-truncate text-muted small mb-2" style="font-weight: 600; font-size: 11px; margin-bottom: 6px;" title="{{ i.attachments_list.0.name }}">
                      <i class="fa fa-file-text-o"></i> {{ i.attachments_list.0.name }}
                    </p>
                  </div>
                  <div class="card-body" style="padding: 8px 12px; height: 95px; display: flex; flex-direction: column; justify-content: flex-start;">
                    <h5 class="card-title font-weight-bold" style="font-size: 13px; margin-bottom: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 34px;" title="{{ i.judul }}">
                      {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                        <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}">{{ i.judul }}</a>
                      {% else %}
                        <a href="{% url 'content_item' pk=i.pk %}">{{ i.judul }}</a>
                      {% endif %}
                    </h5>
                    <p class="card-text text-muted" style="margin-bottom: 0; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ i.deskripsi|truncatewords:8 }}</p>
                  </div>
                  <div class="card-footer d-flex justify-content-between align-items-center" style="padding: 6px 12px; background-color: #fff; border-top: 1px solid #eee;">
                    <span onclick="previewPDF('{% static 'resources/' %}{{ i.attachments_list.0.path }}', event)" 
                          class="text-primary font-weight-bold"
                          style="cursor: pointer; position: relative; z-index: 10; font-size: 11px; text-decoration: none;"
                          onmouseover="this.style.textDecoration='none'" 
                          onmouseout="this.style.textDecoration='none'">
                      <i class="fa fa-download"></i> Download
                    </span>
                    <small class="text-muted font-italic" style="font-size: 10px;">1 Lampiran</small>
                  </div>
                </div>

              {% else %}
                <div class="card h-100 w-100 border-0 shadow-sm" style="overflow: hidden;">
                  <div class="text-center" style="background-color: #f8f9fa; width: 100%; height: 180px; display: flex; align-items: center; justify-content: center;">
                    <img src="{% static 'upload/logo.png' %}" style="height: 70px; opacity: 0.4;" alt="No Thumbnail">
                  </div>
                  <div class="text-center px-2 pt-2 bg-light border-bottom">
                    <p class="text-truncate text-muted small mb-2" style="font-size: 11px; margin-bottom: 6px;">Tidak ada berkas</p>
                  </div>
                  <div class="card-body" style="padding: 8px 12px; height: 95px; display: flex; flex-direction: column; justify-content: flex-start;">
                    <h5 class="card-title font-weight-bold" style="font-size: 13px; margin-bottom: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 34px;" title="{{ i.judul }}">
                      {% if i.deskripsi == 'MASUK' or i.deskripsi == 'KELUAR' %}
                        <a href="{% url 'surat_list' surat_type=i.deskripsi %}?term={{ i.judul }}">{{ i.judul }}</a>
                      {% else %}
                        <a href="{% url 'content_item' pk=i.pk %}">{{ i.judul }}</a>
                      {% endif %}
                    </h5>
                    <p class="card-text text-muted" style="margin-bottom: 0; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ i.deskripsi|truncatewords:8 }}</p>
                  </div>
                  <div class="card-footer" style="padding: 6px 12px; background-color: #fff; border-top: 1px solid #eee;">
                    <span class="font-italic text-muted small" style="font-size: 10px;">Belum ada lampiran</span>
                  </div>
                </div>
              {% endif %}

            </div>
          {% endfor %}
        </div>
      {% endif %}

    {% else %}
      <div class="alert alert-dark text-center">(kosong)</div>
    {% endif %}

    <!-- PAGINASI -->
      <ul class="pagination justify-content-center mb-3">

      {# PREVIOUS #}
      {% if paging.has_previous %}
        <li class="page-item">
          <a class="page-link"
            href="?{% query_transform request page=paging.previous_page_number %}">
            <i class="fa fa-chevron-circle-left"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-left"></i>
          </a>
        </li>
      {% endif %}

      {# NUMBERING #}
      {% for num in paging.paginator.page_range %}
        {% if paging.number == num %}
          <li class="page-item active">
            <a class="page-link" href="#">{{ num }}</a>
          </li>
        {% elif num >= paging.number|add:"-2" and num <= paging.number|add:"2" %}
          <li class="page-item">
            <a class="page-link"
              href="?{% query_transform request page=num %}">
              {{ num }}
            </a>
          </li>
        {% endif %}
      {% endfor %}

      {# NEXT #}
      {% if paging.has_next %}
        <li class="page-item">
          <a class="page-link"
            href="?{% query_transform request page=paging.next_page_number %}">
            <i class="fa fa-chevron-circle-right"></i>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link">
            <i class="fa fa-chevron-circle-right"></i>
          </a>
        </li>
      {% endif %}

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


<!-- Modal Preview PDF -->
<div class="modal fade" id="pdfPreviewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Preview PDF</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <iframe id="pdfPreviewFrame" src="" frameborder="0" style="width: 100%; height: 80vh;"></iframe>
      </div>
    </div>
  </div>
</div>

<!-- Modal Preview Gambar -->
<div class="modal fade" id="imgPreviewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Preview Gambar</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body text-center">
        <img id="imgPreviewFrame" src="" alt="Preview Gambar" style="max-width: 100%; max-height: 80vh;">
      </div>
    </div>
  </div>
</div>

{% endblock %}