{% load i18n %}
<div style="z-index: 1022;" class="oh-modal" id="deleteConfirmation" role="dialog" aria-labelledby="deleteConfirmation" aria-hidden="true">
  <div class="oh-modal__dialog oh-modal__dialog--custom" id="deleteConfirmationBody">
  </div>
</div>


<div
  class="oh-modal"
  id="genericModal"
  role="dialog"
  aria-labelledby="genericModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog" id="genericModalBody"></div>
</div>

<div class="oh-activity-sidebar" id="genericSidebar" style="z-index:1000;">
  <div class="oh-activity-sidebar__body" id="genericOffCanvas">
  </div>
</div>

<div class="oh-modal" id="allocationModal" role="dialog" aria-labelledby="allocationModal" aria-hidden="true">
  <div class="oh-modal__dialog oh-modal__dialog--custom oh-modal__dialog-process">
    <div class="oh-modal__dialog-header">
      <span class="oh-modal__dialog-title" id="addEmployeeModalLabel">{% trans "Allocation" %}</span>
      <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
    </div>
    <div class="oh-modal__dialog-body oh-modal__dialog-body-process" id="allocationModalBody">

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

<script>
  $(document).on("htmx:afterOnLoad", function (event) {
    $("[data-toggle='oh-modal-toggle']").click(function (e) {
      e.preventDefault();
      let clickedEl = $(e.target).closest('[data-toggle = "oh-modal-toggle"]');
      if (clickedEl != null) {
        const targetEl = clickedEl.data("target");
        $(targetEl).addClass("oh-modal--show");
      }
    });
  });
  function switchTab(e) {
    let parentContainerEl = e.target.closest(".oh-tabs");
    let tabElement = e.target.closest(".oh-tabs__tab");

    let targetSelector = e.target.dataset.target;
    let targetEl = parentContainerEl
      ? parentContainerEl.querySelector(targetSelector)
      : null;

    // Highlight active tabs
    if (tabElement && !tabElement.classList.contains("oh-tabs__tab--active")) {
      parentContainerEl
        .querySelectorAll(".oh-tabs__tab--active")
        .forEach(function (item) {
          item.classList.remove("oh-tabs__tab--active");
        });

      if (!tabElement.classList.contains("oh-tabs__new-tab")) {
        tabElement.classList.add("oh-tabs__tab--active");
      }
    }

    // Switch tabs
    if (targetEl && !targetEl.classList.contains("oh-tabs__content--active")) {
      parentContainerEl
        .querySelectorAll(".oh-tabs__content--active")
        .forEach(function (item) {
          item.classList.remove("oh-tabs__content--active");
        });
      targetEl.classList.add("oh-tabs__content--active");
    }
  }
</script>
{% block generic_components %}
{% endblock generic_components %}