{% comment %}

  Adds previous and next button arrows to provide navigation between items.
  Requires cb_page_gen plugin.
  The item order follows the order in the metadata CSV, so pre-sort the CSV to the desired order.

{%- endcomment -%}
<div class="text-center">
  <a class="btn btn-secondary" href="{{ page.previous_item | relative_url }}" id="prev-page-button">&laquo; Previous</a>
  <a class="btn btn-secondary" href="{{ '/browse/' | relative_url }}">Back to The Archive</a>
  <a class="btn btn-secondary" href="{{ page.next_item | relative_url }}" id="next-page-button">Next &raquo;</a>
</div>
<div id="item-nav">
  <div class="d-none d-md-block">
    <a class="previous btn btn-lg btn-secondary" href="{{ page.previous_item | relative_url }}">&laquo;</a>
    <a class="next btn btn-lg btn-secondary" href="{{ page.next_item | relative_url }}">&raquo;</a>
  </div>
</div>
<script>
  function leftArrowPressed() {
    location.href = document.getElementById("prev-page-button").href;
  };

  function rightArrowPressed() {
    location.href = document.getElementById("next-page-button").href;
  };

  function leftModalArrowPressed() {
    // Get the modal element.
    var modalshow = document.querySelector(".modal.show");
    // If the modal exists, get the prev button element.
    if (modalshow) {
      const prevButton = modalshow.querySelector(".prev-child-button");
      // If the prev button exists, click it.
      if (prevButton) {
        prevButton.click();
      }
    }
  };

  function rightModalArrowPressed() {
    // Get the modal element.
    var modalshow = document.querySelector(".modal.show");
    // If the modal exists, get the prev button element.
    if (modalshow) {
      const nextButton = modalshow.querySelector(".next-child-button");
      // If the prev button exists, click it.
      if (nextButton) {
        nextButton.click();
      }
    }
  };

  function isModalShown() {
    // Get the modal element.
    const modal = document.querySelector(".modal.show");

    // Check if the modal has the "show" class.
    return modal && modal.classList.contains("show");
  };

  function isSpotlightModalShown() {
    // Get the modal element.
    const spotlight = document.getElementById("spotlight");
    // Check if the modal has the "show" class.
    return spotlight && spotlight.classList.contains("show");
  };


  document.onkeydown = function (evt) {
    if (isSpotlightModalShown()) {


    } else if (isModalShown()) {
      // The modal is shown.
      evt = evt || window.event;
      switch (evt.keyCode) {
        case 37:
          leftModalArrowPressed();
            break;
        case 39:
          rightModalArrowPressed();
            break;
      }
    }
    else {
      // The modal is not shown.
      evt = evt || window.event;
      switch (evt.keyCode) {
        case 37:
          leftArrowPressed();
            break;
        case 39:
          rightArrowPressed();
            break;
      }
    }

  };
</script>