{% load i18n %} {% load basefilters recruitmentfilters horillafilters %} {% 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
        class="oh-kanban-card candidate
            {% if cand.canceled == True %}
                row-status--red
            {% elif cand.hired == True %}
                row-status--yellow
                {% elif cand.converted == True %}
                row-status--blue
            {% elif cand.hired == False %}
                row-status--purple
            {% endif %}
        "
        style="color: inherit;
                text-decoration: none;
                {% if cand.recruitment_id.closed %}
                background: #8080800f;
                {% endif %}
        "
    >
        <a
            href="{% url 'candidate-view-individual' cand.id %}"
            style="color: inherit; text-decoration: none; display: flex"
        >

        {% if cand.email in emp_list %}
            <!-- Angled Banner Styled to Fit the Card -->
            <div
                class="banner-container fw-bold"
                style=" position: absolute;
                        top: 20px;
                        right: -40px;
                        transform: rotate(37deg);
                        background-color: #40ac40;
                        color: white;
                        padding: 5px 60px;
                        font-size: 12px;
                        z-index: 2;
                        clip-path: polygon(29% 0, 80% 0, 91% 96%, 0 150%);
                        text-align: center;"
                >
                <span style="font-weight: bold;">{% trans "Converted" %}</span>
            </div>
        {% endif %}


            <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"
                    {% if cand.name|length >= 30 %}title = "{{cand.name}}" {% endif %}
                    >{{cand.name|truncatechars:30}}</span
                >
                <span class="oh-kanban-card__subtitle"
                    {% if cand.email|length >= 30 %}title = "{{cand.email}}" {% endif %}
                    >{{cand.email|truncatechars:30}}</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 and perms.recruitment.change_candidate %}
                            <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 or perms.recruitment.change_candidate %}
                            <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 "onboarding"|app_installed %}
                                {% if perms.recruitment.add_rejectedcandidate or request.user|is_stagemanager or perms.recruitment.chanage_candidate %}
                                <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 %}
                        {% endif %}
                        {% if check_candidate_self_tracking %}
                            {% if perms.recruitment.view_candidate or request.user|is_stagemanager %}
                                <li class="oh-dropdown__item">
                                    <a
                                        href="{% url 'candidate-self-status-tracking' cand.id %}"
                                        class="oh-dropdown__link"
                                        >{% trans "View candidate self tracking" %}</a
                                    >
                                </li>
                            {% endif %}
                        {% endif %}
                        {% if check_candidate_self_tracking %}
                            {% if perms.recruitment.change_candidate or perms.recruitment.add_candidatedocumentrequest or request.user|is_stagemanager %}
                                <li class="oh-dropdown__item">
                                    <a
                                        hx-get="{% url 'candidate-document-request' %}?candidate_id={{cand.id}}"
                                        class="oh-dropdown__link"
                                        data-toggle="oh-modal-toggle"
                                        data-target="#objectCreateModal"
                                        hx-target="#objectCreateModalTarget"
                                    >
                                        {% trans "Request Document" %}
                                    </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 %}