{% load i18n %} {% load static %}
<style>
    .oh-kanban-card__title {
        width: 280px;
    }
</style>

{% include 'filter_tags.html' %}
<div class="oh-tabs__content oh-tabs__content--active" id="templateTab">
    {% include "survey/template_accordion.html" %}
</div>
<div class="oh-tabs__content" id="questionTab">
    {% if questions %}
        <div>
            <div class="oh-layout--grid-3">
                {% for question in questions %}
                    <div class="oh-kanban-card" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal"
                        hx-get="{% url 'single-survey-view' question.id %}?instances_ids={{requests_ids}}"
                        hx-target="#objectDetailsModalTarget">
                        <div class="oh-kanban-card__details">
                            <span class="oh-kanban-card__title">{{question}}</span>
                            <span class="oh-kanban-card__subtitle">
                                {% for rec in question.recruitment_ids.all %} {{rec}},&nbsp;
                                {% endfor %}
                            </span>
                        </div>
                        {% if perms.recruitment.delete_recruitmentsurvey or perms.recruitment.change_recruitmentsurvey or perms.recruitment.add_recruitmentsurvey %}
                        <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' %}" onclick="event.stopPropagation()">
                                    <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.recruitment.change_recruitmentsurvey %}
                                            <li class="oh-dropdown__item">
                                                <a hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
                                                    data-toggle="oh-modal-toggle" data-target="#updateSurvey"
                                                    hx-target="#updateSurveyModalBody" class="oh-dropdown__link">{% trans "Edit" %}
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.recruitment.add_recruitmentsurvey %}
                                            <li class="oh-dropdown__item">
                                                <a hx-get="{% url 'recruitment-survey-question-template-duplicate' question.id %}"
                                                    data-toggle="oh-modal-toggle" data-target="#addSurvey"
                                                    hx-target="#addSurveyModalBody" class="oh-dropdown__link">{% trans "Duplicate" %}
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.recruitment.delete_recruitmentsurvey %}
                                            <li class="oh-dropdown__item">
                                                <a href="{% url 'recruitment-survey-question-template-delete' question.id %}"
                                                    onclick="event.preventDefault();event.stopPropagation(); confirm('{% trans "Are you sure want to delete?" %}')" class="text-danger">
                                                    {% trans "Delete" %}
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            <div class="oh-pagination">
                <span class="oh-pagination__page">
                    {% trans "Page" %} {{ questions.number }} {% trans "of" %} {{ questions.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="{{questions.number}}"
                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}" hx-target="#view-container" min="1" />
                        <span class="oh-pagination__label">
                            {% trans "of" %} {{questions.paginator.num_pages}}
                        </span>
                    </div>
                    <ul class="oh-pagination__items">
                        {% if questions.has_previous %}
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target="#view-container" hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page=1"
                                    class="oh-pagination__link">{% trans "First" %}
                                </a>
                            </li>
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target="#view-container"
                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.previous_page_number }}"
                                    class="oh-pagination__link">{% trans "Previous" %}
                                </a>
                            </li>
                        {% endif %}
                        {% if questions.has_next %}
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target="#view-container"
                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.next_page_number }}"
                                    class="oh-pagination__link">{% trans "Next" %}
                                </a>
                            </li>
                            <li class="oh-pagination__item oh-pagination__item--wide">
                                <a hx-target="#view-container"
                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.paginator.num_pages }}"
                                    class="oh-pagination__link">{% trans "Last" %}
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    {% else %}
        <div class="oh-empty">
            <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
            <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
            <p class="oh-empty__subtitle">{% trans "No questions have been established yet." %} </p>
        </div>
    {% endif %}
</div>