{% load i18n %}
{% load recruitmentfilters %}
<ul class="oh-tabs__tablist">
    {% for rec in recruitment %}
    {% if request.user|stage_manages:rec or perms.recruitment.view_recruitment %}

    <li class="oh-tabs__tab" onclick="switchTab(event)" style="{% if rec.closed %}text-decoration: line-through{% endif %};padding-right: 0;{% if request.user|recruitment_manages:rec %} background-color: hsl(38.08deg 100% 50% / 8%); {% endif %}" data-target="#tab_rec_{{rec.id}}">
      {{rec}}
      <div class="d-flex">
      <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="recruitmentCandidateCount{{rec.id}}"
          title="{{rec.stage_set.count}} {% trans "Stages" %}"
          onclick="event.stopPropagation()">
          {{rec.stage_set.count}}
          </span
        >
      </div>
      <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={% trans "Actions" %}
        >
          <ion-icon
            name="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.recruitment.change_recruitment or request.user|recruitment_manages:rec %}
            <li class="oh-dropdown__item">
              <a hx-get="{% url 'recruitment-update-pipeline' rec.id %}" hx-target='#objectUpdateModalTarget' data-toggle='oh-modal-toggle' data-target="#objectUpdateModal" class="oh-dropdown__link"
              >{% trans "Edit" %}</a
              >
            </li>
            {% endif %}
            {% if not rec.closed %}
              {% if perms.recruitment.change_recruitment or request.user|recruitment_manages:rec %}
                <li class="oh-dropdown__item">
                  <a href="{% url 'recruitment-close-pipeline' rec.id %}" class="oh-dropdown__link"
                  onclick="return confirm('{% trans "Are you sure you want to close this recruitment?" %}');"
                  >{% trans "Close" %}</a
                  >
                </li>
              {% endif %}
              {% if perms.recruitment.add_candidate or request.user|recruitment_manages:rec %}
                <li class="oh-dropdown__item">
                  <a hx-get = "{% url 'view-bulk-resume'%}?rec_id={{rec.id}}"
                    hx-target = "#bulkResumeUploadBody"
                    data-toggle="oh-modal-toggle"
                    data-target="#bulkResumeUpload"
                    class="oh-dropdown__link"
                  >{% trans "Resume Shortlisting" %}</a
                  >
                </li>
              {% endif %}
            {% elif perms.recruitment.change_recruitment or request.user|recruitment_manages:rec %}
              <li class="oh-dropdown__item">
                <a href="{% url 'recruitment-reopen-pipeline' rec.id %}" class="oh-dropdown__link"
                onclick="return confirm('{% trans "Are you sure you want to reopen this recruitment?" %}');"
                >{% trans "Reopen" %}</a
                >
              </li>
            {% endif %}
            {% if perms.recruitment.delete_recruitment %}
            <li class="oh-dropdown__item">
              <form
              action = "{% url 'recruitment-delete-pipeline' rec.id %}"
              onsubmit="return confirm('{% trans "Are you sure you want to delete this recruitment?" %}');"
                method='post'
                action=""
                >
                {% csrf_token %}
                <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">
                  {% trans "Delete" %}
                </button>
                </form
                >
              </li>
              {% endif %}
          </ul>
        </div>
      </div>
    </div>

    </li>
    {% endif %}
    {% endfor %}
  </ul>