{% load i18n %}{% load static %}

<!-- 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 %}
  <script>
    setTimeout(function () {
      $(".oh-modal__close").click();
    }, 1000);
  </script>
</div>
{% endif %}
<!-- end of messages -->

<!-- start of quick filters -->
<div class="d-flex flex-row-reverse">
  <span
    class="m-1"
    onclick="$('[name=stage_type]').val('hired'); $('[name=stage_type]').first().change(); $('.filterButton').click()"
    style="cursor: pointer; margin-left: 10px"
  >
    <span
      class="oh-dot oh-dot--small me-1"
      style="background-color: yellowgreen"
    ></span>
    {% trans "Hired" %}
  </span>
  <span
    class="m-1"
    onclick="$('[name=stage_type]').val('cancelled'); $('[name=stage_type]').first().change(); $('.filterButton').click()"
    style="cursor: pointer; margin-left: 10px"
  >
    <span
      class="oh-dot oh-dot--small me-1"
      style="background-color: red"
    ></span>
    {% trans "cancelled" %}
  </span>
  <span
    class="m-1"
    onclick="$('[name=stage_type]').val('interview'); $('[name=stage_type]').first().change(); $('.filterButton').click()"
    style="cursor: pointer; margin-left: 10px"
  >
    <span
      class="oh-dot oh-dot--small me-1"
      style="background-color: orange"
    ></span>
    {% trans "interview" %}
  </span>
  <span
    class="m-1"
    onclick="$('[name=stage_type]').val('test'); $('[name=stage_type]').first().change(); $('.filterButton').click()"
    style="cursor: pointer; margin-left: 10px"
  >
    <span
      class="oh-dot oh-dot--small me-1"
      style="background-color: blue"
    ></span>
    {% trans "Test" %}
  </span>
  <span
    class="m-1"
    onclick="$('[name=stage_type]').val('initial'); $('[name=stage_type]').first().change(); $('.filterButton').click()"
    style="cursor: pointer; margin-left: 10px"
  >
    <span
      class="oh-dot oh-dot--small me-1"
      style="background-color: cyan"
    ></span>
    {% trans "Initial" %}
  </span>
</div>
<!-- end of quick filters -->

{% include 'filter_tags.html' %}
<div class="oh-card" id="">
  {% if recruitments %}
  <div class="oh-accordion-meta">
    <div class="">
      {% for rec in recruitments %}
      <div
        class="oh-accordion-meta__header oh-accordion-meta__header--custom"
        data-target="#stageBody{{rec.grouper.id}}"
        hx-get="{% url 'stage-data' rec.grouper.id %}?{{request.GET.urlencode}}"
        hx-target="#stageData{{rec.grouper.id}}"
        >
        <div class="d-flex">
          <div class="oh-tabs__input-badge-container">
            <span
              class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
            >
              {{rec.list|length}}
            </span>
            <span
              class="oh-accordion-meta__title"
              style="padding: 0.8rem 1.25rem"
              >{{rec.grouper}}</span
            >
          </div>
        </div>
      </div>
      <div
        class="oh-accordion-meta__body d-none"
        id="stageBody{{rec.grouper.id}}"
        >
        <div
          class="oh-sticky-table oh-sticky-table--no-overflow mb-5"
          id="stageData{{rec.grouper.id}}"
        ></div>
      </div>
      {% endfor %}
    </div>
  </div>
  <!-- start of pagination -->
  <div class="oh-pagination">
    <span
      class="oh-pagination__page"
      data-toggle="modal"
      data-target="#addEmployeeModal"
    >
      {% trans "Page" %} {{ recruitments.number }}
      {% trans "of" %} {{ recruitments.paginator.num_pages }}.
    </span>
    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>

        <input
          type="number"
          name="rpage"
          class="oh-pagination__input"
          value="{{recruitments.number}}"
          hx-get="{% url 'stage-search' %}?{{pd}}"
          hx-target="#stage-container"
          min="1"
        />
        <span class="oh-pagination__label"
          >{% trans "of" %} {{recruitments.paginator.num_pages}}</span
        >
      </div>

      <ul class="oh-pagination__items">
        {% if recruitments.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#stage-container"
            hx-get="{% url 'stage-search' %}?{{pd}}&rpage=1"
            class="oh-pagination__link"
            >{% trans "First" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#stage-container"
            hx-get="{% url 'stage-search' %}?{{pd}}&rpage={{ recruitments.previous_page_number }}"
            class="oh-pagination__link"
            >{% trans "Previous" %}</a
          >
        </li>
        {% endif %} {% if recruitments.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#stage-container"
            hx-get="{% url 'stage-search' %}?{{pd}}&rpage={{ recruitments.next_page_number }}"
            class="oh-pagination__link"
            >{% trans "Next" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-target="#stage-container"
            hx-get="{% url 'stage-search' %}?{{pd}}&rpage={{ recruitments.paginator.num_pages }}"
            class="oh-pagination__link"
            >{% trans "Last" %}</a
          >
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  <!-- end of pagination -->
  {% else %}
  <!-- start of empty page -->
  <div
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    "
  >
    <img
      style="width: 150px; height: 150px"
      src="{% static 'images/ui/no-results.png' %}"
      class="oh-404__image mb-4"
    />
    <h5 class="oh-404__subtitle">{% trans "No search result found!" %}</h5>
  </div>
  <!-- end of empty page -->
  {% endif %}
</div>