{% extends "base.html" %}
{% load custom_filters %}
{% load static %}

{% block title %}{{ paper.question_paper.quiz.description }}{% endblock %}

{% block nav %}
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
    <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
      <div class="row ml-auto">
        <div class="col-md-4">
          <span class="time-div nav-item" id="time_left"></span>
        </div>
        <div class="col-md-7">
          <form id="logout" action="{% url 'yaksh:quit_quiz' paper.attempt_number module.id paper.question_paper.id course.id %}" method="post" class="ml-auto">
            {% csrf_token %}
            <span class="nav-item"><button class="btn btn-danger btn-lg" type="submit" name="quit">
              {% if paper.questions_unanswered.all %}
                Quit {{quiz_type}}
              {% else %}
                Finish {{quiz_type}}
              {% endif %}
            <i class="fa fa-power-off"></i></button></span>
          </form>
        </div>
      </div>
    </div>
  </nav>
</div>
{% endblock %}
{% block content %}
<div class="container-fluid">
  <div class="row">
    <!-- Side Component -->
    <div class="col-md-3 bg-secondary" style="overflow-x: scroll;">
      <br>
      <center>
        <b>{{course.name}}</b><br>
        {{ paper.question_paper.quiz.description }}</h4>
      </center>
      <hr>
      <center><p><b><u>Question Navigator</b></u></p></center>
      <br>
      <div class="justify-content-center">
        {% for qid in paper.get_all_ordered_questions %}
          {% if paper.question_paper.quiz.allow_skip %}
            {% if qid in paper.get_questions_unanswered %}
              {% if qid.id == question.id %}
              <a class="active btn btn-outline-primary " href="#"data-toggle="tooltip"
                  title="{{ qid.description|striptags|truncatechars:100 }}" style="width: 50px"
                  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
              {% else %}
              <a class=" btn btn-outline-primary " href="#" data-toggle="tooltip" title="{{ qid.description|striptags|truncatechars:100 }}" style="width: 50px"
                  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
              {% endif %}
            {% endif %}
            {% if qid in paper.get_questions_answered %}
            <a class="btn btn-success" href="#" data-toggle="tooltip" style="width: 50px"
            onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
            title="{{ qid.description|striptags|truncatechars:100 }}">{{ forloop.counter }}</a>
            {% endif %}
          {% else %}
            {% if qid.id == question.id %}
            <a class="active btn btn-outline-primary" data-toggle="tooltip" title="{{ qid.description|striptags|truncatechars:100 }}" style="width: 50px">{{ forloop.counter }}</a>
            {% elif qid in paper.get_questions_answered %}
            <a class="btn btn-success" href="#" data-toggle="tooltip" style="width: 50px"
            onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
            title="{{ qid.description|striptags|truncatechars:100 }}">{{ forloop.counter }}</a>
            {% else %}
            <a class="btn btn-outline-primary" style="width: 50px" data-toggle="tooltip" title="{{ qid.description|striptags|truncatechars:100 }}">{{ forloop.counter }}</a>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
      <br>
      <p><span class="btn btn-success"></span> Attempted question(s)</p>
      <p><span class="btn btn-primary"></span> Current question</p>
      <p><span class="btn btn-outline-primary"></span> Unattempted question(s)</p>
      <br>
      <div>
        <p class="text-center">Question(s) left: <b>{{ paper.questions_left }}</b></p>
      </div>
      <br>
      <div>
          <table class="table table-bordered table-responsive-sm">
            <thead>
              <tr>
                <th>Category</th>
                <th>Question No.</th>
              </tr>
            </thead>
            <tbody>
              {% for category, question_number in paper.get_categorized_question_indices.items %}
              <tr>
                <td>
                  {{category}}
                </td>
                <td>
                  {{question_number| join:", "}}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        <br>
      </div>
    </div>
    <!-- Main Component -->
    <div class="col-md-9">
      <br>
      {% block main %}
      {% endblock %}
    </div>
  </div>
</div>

{% endblock %}