<h5 class="card-title">{{document_template.name}} - {{object}}</h5>

<div class="row my-4">
    <div class="col align-items-center d-flex justify-content-center gap-3">
      <!-- Modal trigger button -->
      <button
        type="button"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#modalId"
      >
        Create new document from template
      </button>
  
      <a class="btn btn-secondary" href="{% url "document_templates_detail_overview" document_template.pk %}">Update document template</a>
    </div>
</div>


{% if file_list %}

<!--Pagination-->
<div class="row">
    <div class="col align-items-center d-flex justify-content-center gap-3">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous" onclick="prevPDF()">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            {% for file in file_list %}
                <li class="page-item{% if forloop.counter0 == currentIndex %} active{% endif %}">
                    <a class="page-link" href="#" onclick="loadPDF({{ forloop.counter0 }})">{{ forloop.counter }}</a>
                </li>
            {% endfor %}
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next" onclick="nextPDF()">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </div>
</div>



<!--File-->
<div class="row">
    <div class="col">

        <div id="pdf-container">
            <embed id="pdf-embed" src="{{ file_list.0.file.url }}" width="100%" height="600px" type="application/pdf">
        </div>
        
    </div>
</div>
<script>
    var pdfFiles = [
        {% for file in file_list %}
            "{{ file.file.url }}",
        {% endfor %}
    ];

    var currentIndex = 0;
    var pdfEmbed = document.getElementById('pdf-embed');

    function loadPDF(index) {
        currentIndex = index;
        pdfEmbed.src = pdfFiles[index];
        updateActivePage(); // Call a function to update active page
    }

    function prevPDF() {
        if (currentIndex > 0) {
            currentIndex--;
            pdfEmbed.src = pdfFiles[currentIndex];
            updateActivePage(); // Call a function to update active page
        }
    }

    function nextPDF() {
        if (currentIndex < pdfFiles.length - 1) {
            currentIndex++;
            pdfEmbed.src = pdfFiles[currentIndex];
            updateActivePage(); // Call a function to update active page
        }
    }

    function updateActivePage() {
        var pageItems = document.querySelectorAll('.pagination .page-item');
        pageItems.forEach(function (item, index) {
            if (index-1 === currentIndex) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }
</script>

{% endif %}

{% load crispy_forms_tags %}

<!-- Modal Body -->
<!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
<div
  class="modal fade"
  id="modalId"
  tabindex="-1"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  role="dialog"
  aria-labelledby="modalTitleId"
  aria-hidden="true"
>
  <div
    class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md"
    role="document"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitleId">Create new document</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <form method="post" action="">
        {% csrf_token %}
        <div class="modal-body">
          {{free_variable_form | crispy}}

          <hr />

          {% if instance_list %}

          <div class="mb-3">
            <label for="" class="form-label">Instance</label>
            <select
              class="form-select"
              name="instance_select"
              id="instance_select"
              required
            >
              {% for instance in instance_list %}
              <option value="{{instance.pk}}">{{instance}}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

