{% 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' 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>
                <div class="oh-sticky-table__th" style="width: 90px;">{% trans "Actions" %}</div>
              </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="#objectDetailsModal"
                data-toggle="oh-modal-toggle"
                hx-get="{% url 'single-survey-view' question.id %}?instances_ids={{requests_ids}}"
                hx-target="#objectDetailsModalTarget"
              >
                <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>
                <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                  <div class="oh-btn-group">
                    <button
                    hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
                    data-toggle="oh-modal-toggle"
                    data-target="#updateSurvey"
                    hx-target="#updateSurveyModalBody"
                      class="oh-btn oh-btn--light-bkg w-100"
                      title="{% trans 'Edit' %}"
                    >
                    <ion-icon name="create-outline"></ion-icon>
                  </button>
                  <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>
                  </div>
                </div>
              </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-wrapper">
  <img style="width: 150px; height: 150px; display: block; margin: 0 auto;" src="{% static 'images/ui/editor.png' %}" class="oh-404__image mb-4" alt="Page not found. 404." />
  <h5 class="oh-404__subtitle">{% trans "No template groups have been established yet." %}</h5>
</div>

{% endif %}