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

{% block content %}
{% include 'quiz/_header.html' with active='taken' %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'quiz:taken_quiz_list' %}">Quizzes</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{quiz.name}}</li>
    </ol>
</nav>
<!-- <h2>{{quiz.name}}</h2> -->
{{ quiz.subject.get_html_badge }}

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: {{percentage}}%" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100">{{percentage}}%</div>
</div><br>
{% for question in questions %}
<div class="card">
  <div class="card-body">
    <h5 class="card-title">{{forloop.counter}}. {{question.text}}</h5>
    {% if question.img %}<img src="{% static 'quiz_img/'|add:question.img %}" class="img-thumbnail" style="max-width: 100%">{% endif %}
    
    {% if question.img_explanation %}<img src="{% static 'quiz_img/'|add:question.img_explanation %}" class="img-thumbnail" style="max-width: 100%">{% endif %}
    <table class="table table-bordered table-sm">
      <thead><tr><th>Yours</th><th>Correct</th><th></th></tr></thead>
      <tbody>
        {% for opt in question.answers.all %}
        {% marked_answer user opt as opt_marked %}        
        <tr>
          <td style="width: 100px;{% if opt_marked == 'correct' %} background:green{% elif opt_marked == 'wrong' %} background:red{% endif %}"> </td>
          <td style="width: 100px;{% if opt.is_correct %} background:green{% endif %}"></td>
          <td>{{opt}}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<br>
{% endfor %}
{% endblock %}

{% block js %}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endblock %}