{% load i18n %} {% load static %} {% load basefilters %}
{% if messages %}
    {% for message in messages %}
        <div class="oh-wrapper">
          <div class="oh-alert-container">
            <div class="oh-alert oh-alert--animated {{message.tags}} ">{{message}}</div>
          </div>
        </div>
    {% endfor %}
{% endif%}
{% if question_templates %}
<div class="oh-sticky-table">
  <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 "Title" %}</div>
        <div class="oh-sticky-table__th">{% trans "Total Question" %}</div>
        {% if perms.pms.change_questiontemplate or perms.pms.delete_questiontemplate or request.user|filtersubordinates %}
            <div class="oh-sticky-table__th"></div>
        {% endif %}
      </div>
    </div>
    <div class="oh-sticky-table__tbody">
      {% for question_template in question_templates %}
      <div class="oh-sticky-table__tr" draggable="true">
        <a
          style="color: inherit; text-decoration: none"
          href="{% url 'question-template-detailed-view' template_id=question_template.id %}"
          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_template.question_template}}&background=random"
                class="oh-profile__image"
                alt="Mary Magdalene"
              />
            </div>
            <span class="oh-profile__name oh-text--dark"
              >{{question_template.question_template}}</span
            >
          </div>
        </a>
        <a
          style="color: inherit; text-decoration: none"
          href="{% url 'question-template-detailed-view' template_id=question_template.id %}"
          class="oh-sticky-table__td"
          >{{question_template.question.count}}</a
        >

        {% if perms.pms.change_questiontemplate or perms.pms.delete_questiontemplate or request.user|filtersubordinates %}
        <div class="oh-sticky-table__td">
          <div class="oh-btn-group">
            {% if perms.pms.change_questiontemplate or request.user|filtersubordinates %}
            <a
              class="oh-btn oh-btn--light-bkg w-100"
              data-toggle="oh-modal-toggle"
              data-target="#questionTemplateUpdateModal"
              hx-get="{% url 'question-template-update'  template_id=question_template.id %}"
              title="{% trans 'Update' %}"
              hx-target="#questionTemplateUpdateModalTarget"
            >
              <ion-icon
                name="create-outline"
                role="img"
                class="md hydrated"
                aria-label="create outline"
              ></ion-icon
            ></a>
            {% endif %} {% if perms.pms.delete_questiontemplate or request.user|filtersubordinates %}
            <a
              class="oh-btn oh-btn--danger-outline w-100"
              title="{% trans 'Delete' %}"
              hx-confirm="{% trans 'Do you want to delete this question template?' %}"
              hx-get="{% url 'question-template-delete' template_id=question_template.id %}"
              hx-target="#questionTemplateList"
            >
              <ion-icon
                name="trash-outline"
                role="img"
                class="md hydrated"
                aria-label="trash outline"
              ></ion-icon>
            </a>
            {% endif %}
          </div>
        </div>
        {% endif %}
      </div>
      {% endfor%}
    </div>
  </div>
</div>
{% else %}
<div class="oh-wrapper-main">
  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    <div class="oh-wrapper">
      <div class="oh-404">
          <img style="    width: 190px;height: 190px;" src="{% static 'images/ui/editor.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
          <h5 class="oh-404__subtitle">{% trans "No Question templates are available." %}</h5>
      </div>
    </div>
  </main>
</div>
{% endif %}