{% comment %} {% extends 'index.html' %}
{% block content %} {% endcomment %}
{% load static %}
{% load i18n %}
{% load basefilters %}
{% load yes_no %}
<style>

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

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

</style>
{% comment %} <div class="oh-wrapper">
    {% include 'skill_zone_cand/skill_zone_cand_nav.html' %} {% endcomment %}
    <div id="" >
        {% include 'filter_tags.html' %}

        <!-- start of candidates  -->
        <div class="oh-layout--grid-3">
                {% for cand in sz_candidates %}
                    <div class="oh-kanban-card candidate"  style="color: inherit;text-decoration: none;">
                    {% comment %} <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none; display: flex;"> {% endcomment %}
                        <div class="oh-kanban-card__avatar">
                            <div class="oh-kanban-card__profile-container">
                                <img
                                src="{{cand.candidate_id.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.candidate_id.name}}</span>
                            <span class="oh-kanban-card__subtitle">{{cand.candidate_id.email}}</span><br>
                        </div>
                    {% comment %} </a> {% endcomment %}
                    <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 perms.recruitment.change_candidate %}
                            <li class="oh-dropdown__item">
                                <a
                                    hx-get="{% url 'skill-zone-cand-edit' sz_candidate.id %}"
                                    data-toggle="oh-modal-toggle"
                                    data-target="#editModal"
                                    hx-target="#editTarget"
                                    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 candidates  -->

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

            <ul class="oh-pagination__items">
                {% if sz_candidates.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={{ sz_candidates.previous_page_number }}&view=card" class="oh-pagination__link">{% trans "Previous" %}</a>
                </li>
                {% endif %}
                {% if sz_candidates.has_next %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ sz_candidates.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={{ sz_candidates.paginator.num_pages }}&view=card" class="oh-pagination__link">{% trans "Last" %}</a>
                </li>
                {% endif %}

            </ul>
            </nav>
        </div>
        <!-- end of pagination  -->
    </div>