{% load i18n %}
{% load basefilters recruitmentfilters %}
{% load static %}
{{candidates}}

<style>

  .profile-picture {
    transition: transform 0.3s;
    z-index:9999
    ;
  }

  .profile-picture:hover {
      transform: scale(2.4);
  }

</style>

{% include 'filter_tags.html' %}

{% if data %}
  <!-- start of sticky table -->
  <div class="oh-layout--grid-3">
    {% for cand in data %}
    <div {% if cand.recruitment_id.closed %} style="background: #8080800f;" {% endif %}  class="oh-kanban-card candidate {% if cand.canceled == True %} row-status--red {% elif cand.hired == True %} row-status--yellow {% elif cand.hired == False %} row-status--purple {% endif %}" style="color: inherit;text-decoration: none;">
      <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none; display: flex;">
      <div class="oh-kanban-card__avatar">
          <div class="oh-kanban-card__profile-container">
            <img
              src="{{cand.get_avatar}}"
              class="oh-kanban-card__profile-image"
              alt="Username"
              />
          </div>
      </div>

      <div class="oh-kanban-card__details">
        <span class="oh-kanban-card__title">{{cand.name}}</span>
        <span class="oh-kanban-card__subtitle">{{cand.email}}</span><br>
        <span class="oh-kanban-card__subtitle">{{cand.job_position_id}}</span>
      </div>
    </a>
      <div class="oh-kanban-card__dots">
        <div class="oh-dropdown" x-data="{show: false}">
          <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
            <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="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" style="display: none;">
            <ul class="oh-dropdown__items">
              {% if not cand.email in emp_list %}
                {% if not cand.start_onboard %}
                  <li class="oh-dropdown__item">
                    <a href="{% url 'candidate-conversion' cand.id %}"
                      onclick="return confirm('{% trans "Are you sure you want to convert this candidate into an employee?" %}')"
                      style="text-decoration:none;"
                    >
                      {% trans "Convert to Employee" %}</a>
                  </li>
                {% endif %}
                {% if perms.recruitment.add_skillzonecandidate %}
                  <li class="oh-dropdown__item">
                    <a
                      data-toggle="oh-modal-toggle"
                      data-target="#createModal"
                      hx-get="{% url 'to-skill-zone' cand.id %}"
                      hx-target="#createTarget"
                    >{% trans "Add to Skill Zone" %}</a>
                  </li>
                {% endif %}
                {% if perms.recruitment.add_rejectedcandidate or request.user|is_stagemanager %}
                  <li class="oh-dropdown__item">
                    <a
                            class="oh-dropdown__link oh-dropdown__link--secondary"
                            hx-target="#createTarget"
                              hx-swap="innerHTML"
                              class="oh-btn oh-btn--light"
                              data-toggle="oh-modal-toggle"
                              data-target="#createModal"
                              hx-get="{% url 'add-to-rejected-candidates' %}?candidate_id={{cand.id}}"
                              {% if cand.is_offer_rejected %}
                              title="{% trans "Added In Rejected Candidates" %}"
                              {% else %}
                              title="{% trans "Add To Rejected Candidates" %}"
                              {% endif %}
                            >
                            {% if not cand.is_offer_rejected %}
                            {% trans "Add to Rejected" %}
                            {% else %}
                            {% trans "Edit Rejected Candidate" %}
                            {% endif %}
                            </a
                          >
                  </li>
                {% endif %}
              {% endif %}
              {% if perms.recruitment.change_candidate %}
              <li class="oh-dropdown__item">
                <a href="{% url 'rec-candidate-update' cand.id %}" class="oh-dropdown__link">{% trans "Edit Profile" %}</a>
              </li>
              {% endif %}
              {% if perms.recruitment.delete_candidate %}
              {% if cand.is_active  %}
              <li class="oh-dropdown__item">
                <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Archive" %}</a>
              </li>
              {% else %}
              <li class="oh-dropdown__item">
                <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to un-archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Un-Archive" %}</a>
              </li>
              {% endif %}
              {% endif %}
              {% if perms.recruitment.delete_candidate %}
              <li class="oh-dropdown__item">
                <form action="{% url 'rec-candidate-delete' cand.id %}" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method="post">
                  {% csrf_token %}
                  <button  class="oh-dropdown__link oh-dropdown__link--danger  ">{% trans "Delete" %}</button>
                </form>

              </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  <!-- end of sticky table -->

  <!-- start of pagination -->
  <div class="oh-pagination">
    <span
      class="oh-pagination__page"
      data-toggle="modal"
      data-target="#addEmployeeModal"
      >
      {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.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="{{data.number}}"
          hx-get="{% url 'search-candidate' %}?{{pd}}&view=card"
          hx-target="#section"
          min="1"
        />
        <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
      </div>

      <ul class="oh-pagination__items">
        {% if data.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page=1&view=card" class="oh-pagination__link">{% trans "First" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=card" class="oh-pagination__link">{% trans "Previous" %}</a>
        </li>
        {% endif %}
        {% if data.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.next_page_number }}&view=card" class="oh-pagination__link">{% trans "Next" %}</a>
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.paginator.num_pages }}&view=card" class="oh-pagination__link">{% trans "Last" %}</a>
        </li>
        {% endif %}

      </ul>
    </nav>
  </div>
  <!-- end of pagination -->
{% else %}
  <!-- start of empty page -->
  <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>
  <!-- end of empty page -->
{% endif %}