{% load i18n %}{% load static %}
{% if templates %}
    <div class="oh-card">
        {% for grouper in templates %}
            <div class="oh-accordion-meta mb-1">
                <div class="oh-accordion-meta__item">
                    <div class="oh-accordion-meta__header">
                        <span class="oh-accordion-meta__title d-flex">
                            {{grouper.grouper}}
                            <div class="oh-tabs__input-badge-container">
                                <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
                                    id="recruitmentCandidateCount1" title="{{grouper.list|length}} {% trans 'Questions' %}"
                                    onclick="event.stopPropagation()">
                                    {{grouper.list|length}}
                                </span>
                            </div>
                        </span>
                        <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
                            <div class="oh-dropdown" x-data="{open: false}">
                                {% if grouper.grouper %}
                                    <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn"
                                        @click="open = !open" @click.outside="open = false" title="{% trans 'Actions' %}">
                                        <ion-icon name="ellipsis-vertical" role="img" class="md hydrated"
                                            aria-label="ellipsis vertical"></ion-icon>
                                    </button>
                                    <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none;">
                                        <ul class="oh-dropdown__items">
                                            <li class="oh-dropdown__item">
                                                <a href="{% url 'survey-template-preview' %}?title={{grouper.grouper}}"
                                                    class="oh-dropdown__link">
                                                    {% trans "Preview" %}
                                                </a>
                                            </li>
                                            {% if perms.recruitment.change_surveytemplate %}
                                                <li class="oh-dropdown__item">
                                                    <a hx-get="{% url 'survey-template-question-add' %}?title={{grouper.grouper}}"
                                                        hx-target="#templateModalBody" data-toggle="oh-modal-toggle"
                                                        data-target="#templateModal" class="oh-dropdown__link">
                                                        {% trans "Add Questions" %}
                                                    </a>
                                                </li>
                                            {% endif %}
                                            {% if perms.recruitment.change_surveytemplate %}
                                                <li class="oh-dropdown__item">
                                                    <a hx-get="{% url 'survey-template-create' %}?title={{grouper.grouper}}"
                                                        hx-target="#templateModalBody" data-toggle="oh-modal-toggle"
                                                        data-target="#templateModal" class="oh-dropdown__link">
                                                        {% trans "Edit" %}
                                                    </a>
                                                </li>
                                            {% endif %}
                                            {% if perms.recruitment.delete_surveytemplate %}
                                                <li class="oh-dropdown__item">
                                                    <a href="{% url 'survey-template-delete' %}?title={{grouper.grouper}}"
                                                        onclick="return confirm('{% trans "Do you want to delete this template" %}')"
                                                        class="oh-dropdown__link tex-danger" style="color: #dc3545!important;">
                                                        {% trans "Delete" %}
                                                    </a>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="oh-accordion-meta__body d-none">
                        <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
                            <div class="oh-sticky-table__table">
                                <div class="oh-sticky-table__thead">
                                    <div class="oh-sticky-table__tr">
                                        <div class="oh-sticky-table__th">{% trans "Question" %}</div>
                                        <div class="oh-sticky-table__th">{% trans "Type" %}</div>
                                        {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
                                            <div class="oh-sticky-table__th" style="width: 90px;">{% trans "Actions" %}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="oh-sticky-table__tbody">
                                    {% for question in grouper.list %}
                                        <div class="oh-sticky-table__tr oh-multiple-table-sort__movable" data-target="#genericModal"
                                            data-toggle="oh-modal-toggle"
                                            hx-get="{% url 'single-survey-view' question.id %}?instance_ids={{requests_ids}}"
                                            hx-target="#genericModalBody">
                                            <div class="oh-sticky-table__sd">
                                                <div class="oh-profile oh-profile--md">
                                                    <div class="oh-profile__avatar mr-1">
                                                        <img src="https://ui-avatars.com/api/?name={{question.question}}&background=random"
                                                            class="oh-profile__image" />
                                                    </div>
                                                    <span class="oh-profile__name oh-text--dark">{{question.question}}</span>
                                                </div>
                                            </div>
                                            <div class="oh-sticky-table__td">{{question.get_type_display}}</div>
                                            {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
                                                <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                                    <div class="oh-btn-group">
                                                        {% if perms.recruitment.change_recruitmentsurvey %}
                                                            <button
                                                                hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
                                                                data-toggle="oh-modal-toggle" data-target="#genericModal"
                                                                hx-target="#genericModalBody" class="oh-btn oh-btn--light-bkg w-100"
                                                                title="{% trans 'Edit' %}">
                                                                <ion-icon name="create-outline"></ion-icon>
                                                            </button>
                                                        {% endif %}
                                                        {% if perms.recruitment.delete_recruitmentsurvey %}
                                                            <a href="{% url 'recruitment-survey-question-template-delete' question.id %}"
                                                                onclick="return confirm('Do you want to delete this record?')"
                                                                data-toggle="oh-modal-toggle"
                                                                class="oh-btn oh-btn--light-bkg w-100 tex-danger"
                                                                style="color: hsl(8,77%,56%);" title="{% trans 'delete' %}">
                                                                <ion-icon name="trash-outline"></ion-icon>
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% if grouper.list %}
                            <div class="oh-pagination">
                                <span class="oh-pagination__page">
                                    {% trans "Page" %} {{ grouper.list.number }} {% trans "of" %} {{ grouper.list.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="{{grouper.dynamic_name}}" class="oh-pagination__input"
                                            value="{{grouper.list.number}}" hx-get="{% url 'rec-filter-survey' %}?{{pd}}"
                                            hx-target="#view-container" min="1" />
                                        <span class="oh-pagination__label">{% trans "of" %}
                                            {{grouper.list.paginator.num_pages}}</span>
                                    </div>
                                    <ul class="oh-pagination__items">
                                        {% if grouper.list.has_previous %}
                                            <li class="oh-pagination__item oh-pagination__item--wide">
                                                <a hx-target="#view-container"
                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}=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}}&{{grouper.dynamic_name}}={{ grouper.list.previous_page_number }}"
                                                    class="oh-pagination__link">{% trans "Previous" %}
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if grouper.list.has_next %}
                                            <li class="oh-pagination__item oh-pagination__item--wide">
                                                <a hx-target="#view-container"
                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.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}}&{{grouper.dynamic_name}}={{ grouper.list.paginator.num_pages }}"
                                                    class="oh-pagination__link">{% trans "Last" %}
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="oh-pagination">
        <span class="oh-pagination__page">
            {% trans "Page" %} {{ templates.number }} {% trans "of" %}
            {{ templates.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="template_page" class="oh-pagination__input" value="{{templates.number}}"
                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}" hx-target="#view-container" min="1" />
                <span class="oh-pagination__label">{% trans "of" %} {{templates.paginator.num_pages}}</span>
            </div>

            <ul class="oh-pagination__items">
                {% if templates.has_previous %}
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#view-container" hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_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}}&template_page={{ templates.previous_page_number }}"
                            class="oh-pagination__link">{% trans "Previous" %}
                        </a>
                    </li>
                {% endif %}
                {% if templates.has_next %}
                    <li class="oh-pagination__item oh-pagination__item--wide">
                        <a hx-target="#view-container"
                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.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}}&template_page={{ templates.paginator.num_pages }}"
                            class="oh-pagination__link">{% trans "Last" %}
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </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 template groups have been established yet." %} </p>
    </div>

{% endif %}