{% load static i18n offboarding_filter %}
<!-- start of messages -->
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
<!-- end of messages -->
<style>
  .oh-select-custom {
    border: 1px solid hsl(213,22%,84%);
    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
    border-radius: 0rem;
  }
  .oh-dot--color-completed {
    background-color: hsl(148deg, 71%, 44%)
  }
  .oh-dot--color-stuck {
    background-color: #ff0400
  }
  .oh-dot--color-inprogress {
    background-color: hsl(204deg, 70%, 53%)
  }
  .oh-dot--color-todo {
    background-color: #e3b75f80
  }

</style>
{% include "filter_tags.html" %}
<script>
  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>
<div id="messages" class="oh-alert-container"></div>
<div class="oh-wrapper">
  <div class="oh-tabs" onclick="switchTab(event)">
    {% if offboardings %}
    <ul class="oh-tabs__tablist">
      {% for offboarding in offboardings %}
        {% if perms.offboarding.view_offboarding or request.user.employee_get|is_in_offboarding:offboarding.offboarding %}
          <li class="oh-tabs__tab" onclick="localStorage.setItem('activeTabOffboarding',$(this).attr('data-target'));" data-target="#Offboarding{{ offboarding.offboarding.id }}">
            {{ offboarding.offboarding.title }}
            <div class="d-flex" onclick="event.stopPropagation()">
              <div class="oh-tabs__input-badge-container">
                <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="recruitmentCandidateCount1" title="{{ offboarding.offboarding.stages|length }} Stages" onclick="event.stopPropagation()">
                  {{ offboarding.offboarding.stages|length }}
                  </span>
              </div>
              {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
              <div class="oh-dropdown" x-data="{open: false}">
                <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn" @click="open = !open" @click.outside="open = false" title="Actions">
                  <ion-icon name="ellipsis-vertical" role="img" class="md hydrated" aria-label="ellipsis vertical"></ion-icon>
                </button>
                <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none;">
                  <ul class="oh-dropdown__items">
                    {% if perms.offboarding.change_offboarding or request.user.employee_get|is_offboarding_manager %}
                    <li class="oh-dropdown__item">
                      <a hx-get="{% url "create-offboarding" %}?instance_id={{offboarding.offboarding.id}}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
                    </li>
                    {% endif %}
                    {% if perms.offboarding.delete_offboarding %}
                    <li class="oh-dropdown__item">
                      <form hx-confirm = 'Are you sure you want to delete this offboarding?' hx-post="{% url "delete-offboarding" offboarding.offboarding.id %}" hx-target="#offboardingContainer">
                        {% csrf_token %}
                        <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">
                          {% trans "Delete" %}
                        </button>
                      </form>
                    </li>
                    {% endif %}
                  </ul>
                </div>
              </div>
              {% endif %}
            </div>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    <div class="oh-tabs__contents">
      {% for offboarding in offboardings %}
        {% if perms.offboarding.view_offboarding or request.user.employee_get|is_in_offboarding:offboarding.offboarding or request.user.employee_get|any_manager %}
          <div class="oh-tabs__content" id="Offboarding{{ offboarding.offboarding.id }}">
              {% if perms.offboarding.add_offboardingstage or request.user.employee_get|is_offboarding_manager %}
              <div class="d-flex flex-row-reverse">
                <a hx-get="{% url 'create-offboarding-stage' %}?offboarding_id={{offboarding.offboarding.id}}" style="width: 100px;" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="mb-3 oh-btn oh-btn--secondary">
                  <ion-icon name="add-outline"></ion-icon>
                  {% trans 'Stage' %}
                </a>
              </div>
              {% endif %}
              {% include "offboarding/stage/stages.html" %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
    {% else %}
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
          <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/no-results.png' %}" class="" alt="Page not found. 404." />
          <h5 class="oh-404__subtitle">{% trans "No search result found!" %}</h5>
      </div>
    {% endif %}
  </div>
</div>

<script>
  let activeTab = localStorage.getItem("activeTabOffboarding")
  if (activeTab) {
    $(`.oh-tabs__tab[data-target="${activeTab}"]`).addClass("oh-tabs__tab--active")
    $(`${activeTab}`).addClass("oh-tabs__content--active")
  }
  function myFunction(val) {
    var selects = $("[data-selected-stage]").val(val)
    selects.siblings('[type=submit]').click()

}
</script>
