{% load i18n %}{% load widget_tweaks %} {% load attendancefilters %}
{% load static %}
<style>
  .question-container {
    padding: 0px;
  }
</style>
<div class="oh-general__tab-target" id="personal">
  <div class="oh-wrapper oh-survey-ques">
    <div class="row pb-5">
      <div class="col-12">{{form.non_field_errors}}</div>

      {% for question in questions %}

      {% if question.type == "textarea" %}
      <div class="d-flex oh-card mt-2">
        {% if question.is_mandatory %}
          <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
        {% else %}
          <span class="oh-label oh-label--question">{{ question.question }}</span>
        {% endif %}
        <textarea
          type="text"
          name="{{question.question}}"
          class="oh-input w-100"
          id="id_{{qgvuestion.id}}"
          {% if question.is_mandatory %}required{% endif %}
        ></textarea>
      </div>
      {% elif question.type == "options" %}
        <div class="d-block oh-card">
          {% if question.is_mandatory %}
            <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
          {% else %}
            <span class="oh-label oh-label--question">{{ question.question }}</span>
          {% endif %}
          <select
            name="{{question.question}}"
            class="oh-select oh-select-2--large oh-select-2 w-100 select2-hidden-accessible"
            id="id_{{question.id}}"
            data-select2-id="select2-data-id_employee_id1"
            aria-hidden="true"
            {% if question.is_mandatory %}required{% endif %}
          >
            <option value="">-------------------------</option>
            {% for choice in question.choices %}
            <option value="{{choice}}">{{choice}}</option>
            {% endfor %}
          </select>
        </div>
        {% elif question.type == "multiple" %}
            <div class="d-block oh-card">
              {% if question.is_mandatory %}
                <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
              {% else %}
                <span class="oh-label oh-label--question">{{ question.question }}</span>
              {% endif %}
              <select
                  name="multiple_choices_{{ question.question }}"
                  class="oh-select oh-select-2--large oh-select-2 w-100 select2-hidden-accessible"
                  style="height: 55px"
                  id="id_{{ question.id }}"
                  {% if question.is_mandatory %}required{% endif %}
                  multiple>
                  {% for choice in question.choices %}
                  <option value="{{ choice }}">{{ choice }}</option>
                  {% endfor %}
              </select>
            </div>
            {% elif question.type == "percentage" %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                <div class="oh-container oh-container--outline my-2">
                  {% comment %} <input class="oh-input oh-input--small oh-input--block px-0" min="0" value="$3.00" > {% endcomment %}
                  <input
                  type="number"
                  class="oh-input oh-input oh-input--small oh-input--block px-0"
                  style="width: 70px; text-align: center;"
                  min="0"
                  value="0"
                  max="100"
                  name="percentage_{{question.question}}"
                  id="id_{{question.id}}"
                  {% if question.is_mandatory %}required{% endif %}
                />
                  <input
                  type="text"
                  class="oh-input w-25 oh-input oh-input--small oh-input--block px-0"
                  value="%"
                  readonly
                />
                </div>
              </div>
            {% elif question.type == "file" %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                <input
                  type="file"
                  class="oh-input w-100"
                  name="file_{{question.question}}"
                  id="id_{{question.id}}"
                  {% if question.is_mandatory %}required{% endif %}
                />
              </div>
            {% elif question.type == "date" %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                <input
                  type="date"
                  class="oh-input w-100"
                  name="date_{{question.question}}"
                  id="id_{{question.id}}"
                  {% if question.is_mandatory %}required{% endif %}
                />
              </div>
            {% elif question.type == "rating" %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                {% include "rating_input.html" %}
              </div>
            {% elif question.type == "checkbox" %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                <div class="oh-input-picker-group">
                  <div class="oh-input-picker oh-input-picker--sm oh-input-picker--selected" style="width: 80px;">
                    <span>
                      <ion-icon name="checkmark-circle-outline"></ion-icon>
                      Yes
                    </span>
                    <input type="radio" name="{{ question.question }}" value="Yes" selected>
                  </div>
                  <div class="oh-input-picker oh-input-picker--sm" style="width: 80px;">
                    <span>
                    <ion-icon name="close-circle-outline"></ion-icon>
                    No
                    </span>
                    <input type="radio" name="{{ question.question }}" value="No">
                  </div>
                </div>

              </div>
            {% else %}
              <div class="d-block oh-card">
                {% if question.is_mandatory %}
                  <span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
                {% else %}
                  <span class="oh-label oh-label--question">{{ question.question }}</span>
                {% endif %}
                <input
                  type="{{question.type}}"
                  class="oh-input w-100"
                  name="{{question.question}}"
                  id="id_{{question.id}}"
                  {% if question.is_mandatory %}required{% endif %}
                />

              </div>
            {% endif %} {% endfor %}
          </div>
          <div class="d-flex justify-content-end align-items-center w-100 mt-4">
            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
              {% trans "Save" %}
            </button>
          </div>
          <div class="col-sm-12 col-md-12 col-lg-12">
            <p class="small text-muted text-center">
              &copy; {% now 'Y' %} {{white_label_company_name}}. All rights resevered.
            </p>
          </div>
      </div>
    </div>
  </div>
</div>