{% extends 'index.html' %} {% block content %}
{% load i18n %}
{% load widget_tweaks %}
{% load static %}
{% load basefilters %}

{% if messages %}
<ul class="messages">
  {% for message in messages %}
  <div class="oh-wrapper">
    <div class="oh-alert-container">
      <div class="oh-alert oh-alert--animated oh-alert--warning">
        {{message}}
      </div>
    </div>
  </div>

  {% endfor %}
</ul>
{% endif %}

<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
  <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
      <h1 class="oh-main__titlebar-title fw-bold">{% trans "Question Template" %}
      </h1>
    </div>
    <div class="oh-main__titlebar oh-main__titlebar--right">
      <div class="oh-main__titlebar-button-container">
        <div class="oh-btn-group ml-2">
          <div>
          {% if perms.pms.add_questiontemplate or request.user|filtersubordinates %}
            <button class="oh-btn oh-btn--secondary" role="button" data-toggle="oh-modal-toggle"
              data-target="#questionTemplateModal">
              <ion-icon name="add-outline"></ion-icon>
              {% trans "Create" %}
            </button>
          {% endif %}
          </div>
        </div>

      </div>
    </div>
  </section>
  <div class="oh-wrapper">


    <!-- question template create modal start -->
    <div class="oh-modal" id="questionTemplateModal" role="dialog" aria-labelledby="questionTemplateModal"
      aria-hidden="true">
      <div class="oh-modal__dialog " >
        <div class="oh-modal__dialog-header">
          <span class="oh-modal__dialog-title" id="addEmployeeModalLabel">{% trans "Question Template" %}</span>
          <button type="button" class="oh-modal__close" aria-label="Close">
            <ion-icon name="close-outline"></ion-icon>
          </button>
        </div>
        <form method="post" action="{% url 'question-template-creation' %}">
          {% csrf_token %}
          <div class="oh-modal__dialog-body m-3w">
            <div class="oh-input__group">
              <label class="oh-input__label mt-0" for="keyTitle">{% trans "Title" %}</label>
              {{form.question_template }}
              <ul class="errorlist" id="id_question_template_error" ></ul>
            </div>
          </div>
          <div class="oh-modal__dialog-footer">
            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow ">
              {% trans "Save" %}
            </button>
          </div>
        </form>
      </div>
    </div>
    <!-- question template modal end -->
    <!-- question template update modal start -->
    <div class="oh-modal" id="questionTemplateUpdateModal" role="dialog" aria-labelledby="questionTemplateUpdateModal"
      aria-hidden="true">
      <div class="oh-modal__dialog " >
        <div class="oh-modal__dialog-header">
          <span class="oh-modal__dialog-title" id="addEmployeeModalLabel">{% trans "Question Template" %}</span>
          <button type="button" class="oh-modal__close" aria-label="Close">
            <ion-icon name="close-outline"></ion-icon>
          </button>
        </div>
        <div id="questionTemplateUpdateModalTarget">

        </div>

      </div>
    </div>
    <!-- question template modal end -->
</main>

<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>
</div>

<script>
  var errorElement = $('#id_question_template_error')
  $(errorElement).hide()

  $('form').on('submit', function (event) {
    event.preventDefault();

    var fieldValue = $('#id_question_template').val();

    if (fieldValue.trim() === '') {
      $(errorElement).show()
      errorElement.text('This field is required.');
      errorElement.insertAfter($('#id_question_template'));
    } else if (fieldValue.length > 100) {
      $(errorElement).show()
      errorElement.text('The field cannot contain more than 100 characters.');
      errorElement.insertAfter($('#id_question_template'));
    } else {
      errorElement.text('');
      errorElement.remove();
      // Submit the form
      this.submit();
    }
  });

</script>

{% endblock content %}