{# INCLUYE ESTOS EN TU TEMPLATE BASE O HEAD #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

<div class="card">
  <div class="card-header">
    <h4 class="text-secondary mb-0"><i class="fas fa-object-group me-2"></i> Planos</h4>
  </div>
  <div class="card-body">
    <div class="row g-3">
      {% for plano in fsc.orden.getPlanos() %}
        {% set extension = plano.filename|split('.')|last|lower %}
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 text-center">

          {# IMÁGENES CON GLIGHTBOX #}
          {% if extension in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
            <a href="{{ myFilesUrl(plano.path) }}" class="glightbox" data-gallery="planos-gallery" data-title="{{ plano.filename }}">
              <img class="img-fluid rounded-3 border" style="height: 180px; object-fit: cover;" src="{{ myFilesUrl(plano.path) }}" alt="{{ plano.filename }}" />
            </a>

          {# PDF CON MODAL FULLSCREEN #}
          {% elseif extension == 'pdf' %}
            <a href="#" data-bs-toggle="modal" data-bs-target="#pdfModal{{ loop.index }}">
              <div class="d-flex align-items-center justify-content-center bg-light border rounded-3" style="height: 180px;">
                <i class="fas fa-file-pdf fa-3x text-danger"></i>
              </div>
            </a>

            <div class="modal fade" id="pdfModal{{ loop.index }}" tabindex="-1" aria-labelledby="pdfModalLabel{{ loop.index }}" aria-hidden="true">
              <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">{{ plano.filename }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                  </div>
                  <div class="modal-body p-0">
                    <embed src="{{ myFilesUrl(plano.path) }}" type="application/pdf" width="100%" height="100%" style="min-height: 100vh;" />
                  </div>
                </div>
              </div>
            </div>

          {# DOCUMENTOS WORD #}
          {% elseif extension in ['doc', 'docx'] %}
            <a href="{{ myFilesUrl(plano.path) }}" target="_blank">
              <div class="d-flex align-items-center justify-content-center bg-light border rounded-3" style="height: 180px;">
                <i class="fas fa-file-word fa-3x text-primary"></i>
              </div>
            </a>

          {# OTROS ARCHIVOS #}
          {% else %}
            <a href="{{ myFilesUrl(plano.path) }}" target="_blank">
              <div class="d-flex align-items-center justify-content-center bg-light border rounded-3" style="height: 180px;">
                <i class="fas fa-file fa-3x text-secondary"></i>
              </div>
            </a>
          {% endif %}

          <h6 class="fw-semibold mt-2 text-truncate" title="{{ plano.filename }}">{{ plano.filename }}</h6>
          <p class="card-text small">{{ plano.observations }}</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{# INICIALIZACIÓN DE GLIGHTBOX #}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    GLightbox({
      selector: '.glightbox',
      touchNavigation: true,
      loop: true,
    });
  });
</script>