{% extends 'quiz/base.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'datatables/dataTables.bootstrap4.min.css' %}">
{% endblock %}

{% block content %}
  {% include 'quiz/_header.html' with active='new' %}
  <p class="text-muted">
    Subjects:{% for subject in user.student.interests.all %} {{ subject.get_html_badge }}{% endfor %}
    <a href="{% url 'quiz:student_interests' %}"><small>(update interests)</small></a>
  </p>

  <table class="table table-bordered mb-0" id="tb_quizlist" >
    <thead>
      <tr>
        <th>Quiz</th>
        <th class="d-none d-sm-table-cell">Subject</th>
        <th class="d-none d-sm-table-cell">Questions</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for quiz in quizzes %}
        <tr{% if quiz.subject.id in student_subjects %} style="background: #fdf7e3"{%endif%}>
          <td class="align-middle">{{ quiz.name }}</td>
          <td class="align-middle d-none d-sm-table-cell">{{ quiz.subject.get_html_badge }}</td>
          <td class="align-middle d-none d-sm-table-cell">{{ quiz.questions_count }}</td>
          <td class="text-right" data-orderable="false">
            <a href="{% url 'quiz:take_quiz' quiz.pk %}" class="btn btn-primary">Start quiz</a>
          </td>
        </tr>
      {% empty %}
        <tr>
          <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

{% block js %}
<script src="{% static 'quiz/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'datatables/dataTables.bootstrap4.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#tb_quizlist').DataTable({"order": [[ 2, "desc" ]]});
});
</script>
{% endblock %}