{% load i18n %} {% load yes_no %} {% load static %}
{% include 'filter_tags.html' %}
{% if skill_zones %}
<div class="oh-layout--grid-3">
    {% for skill_zone in skill_zones %}
    <div
        class="oh-kanban-card"
        onclick="window.location.href = `{% url 'candidate-view' %}?skillzonecandidate_set__skill_zone_id={{skill_zone.id}}`"    >
        <div class="oh-kanban-card__avatar">
            <div class="oh-kanban-card__profile-container">
                <img
                src="https://ui-avatars.com/api/?name={{skill_zone}}&background=random"
                class="oh-kanban-card__profile-image"
                alt="Username"
                />
            </div>
        </div>
        <div class="oh-kanban-card__details">

            <span class="oh-kanban-card__title d-flex">
              {{skill_zone}}
              <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"  title="{{skill_zone.skillzonecandidate_set.all|length}} Candidates" title="4 Stages" onclick="event.stopPropagation()">
                {{skill_zone.skillzonecandidate_set.all|length}}
              </span>
            </span>
        </div>
        <div class="oh-kanban-card__dots">
            <div class="oh-dropdown" x-data="{show: false}" onclick="event.stopPropagation()">
                <button
                class="oh-btn oh-btn--transparent text-muted p-3"
                @click="show = !show"
                title='{% trans "Actions" %}'>
                <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
                </button>
                <div
                class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
                x-show="show"
                @click.outside="show = false"
                >
                <ul class="oh-dropdown__items">
                    {% if perms.add_skillzonecandidate %}
                    <li class="oh-dropdown__item">
                        <a onclick="event.stopPropagation();"
                          hx-get="{% url 'skill-zone-cand-create' skill_zone.id %}"
                          hx-target="#editCandTarget"
                          data-toggle="oh-modal-toggle"
                          data-target="#editCandModal"
                        >{% trans "Add Candidate" %}</a>
                    </li>
                    {% endif %}
                    {% if perms.change_skillzone %}
                    <li class="oh-dropdown__item">
                        <a onclick="event.stopPropagation();"
                          hx-get="{% url 'skill-zone-update' skill_zone.id %}"
                          hx-target="#createTarget"
                          data-toggle="oh-modal-toggle"
                          data-target="#createModal"
                        >{% trans "Edit" %}</a>
                    </li>
                    {% endif %}
                    {% if skill_zone.is_active %}
                      <li class="oh-dropdown__item">
                        <a
                        href="{% url 'skill-zone-archive' skill_zone.id %}"
                        onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to Archive this Skill zone?' %}`)"
                        >{% trans "Archive" %}</a>
                      </li>
                    {% else %}
                      <a
                      href="{% url 'skill-zone-archive' skill_zone.id %}"
                      onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to Un-Archive this Skill zone?' %}`)"
                      >{% trans "Un Archive" %}</a>
                    {% endif %}

                    <li class="oh-dropdown__item">
                        <a class="text-danger"
                        href="{% url 'skill-zone-delete' skill_zone.id %}"
                        onclick = "event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this Skill zone?' %}`)"
                        >{% trans "Delete" %}</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>


<div class="oh-pagination">
    <span
      class="oh-pagination__page"
      >
      {% trans "Page" %} {{ skill_zones.number }} {% trans "of" %} {{ skill_zones.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="page"
          class="oh-pagination__input"
          value="{{skill_zones.number}}"
          hx-get="{% url 'skill-zone-filter' %}?{{pd}}&view=card"
          hx-target="#skill_zone_container"
          min="1"
        />
        <span class="oh-pagination__label">{% trans "of" %} {{skill_zones.paginator.num_pages}}</span>
      </div>
      <ul class="oh-pagination__items">
        {% if skill_zones.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#skill_zone_container' hx-get="{% url 'skill-zone-filter' %}?{{pd}}&view=card&page=1" class="oh-pagination__link">{% trans "First" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#skill_zone_container' hx-get="{% url 'skill-zone-filter' %}?{{pd}}&view=card&page={{ skill_zones.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
        </li>
        {% endif %}
        {% if skill_zones.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#skill_zone_container' hx-get="{% url 'skill-zone-filter' %}?{{pd}}&view=card&page={{ skill_zones.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#skill_zone_container' hx-get="{% url 'skill-zone-filter' %}?{{pd}}&view=card&page={{ skill_zones.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
        </li>
        {% endif %}

      </ul>
    </nav>
</div>

{% else %}
<div class="oh-404">
  <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>
{% endif %}