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

{# load crispy_forms_tags #}
{% load static %}

{% block content %}
{% include 'quiz/_header.html' with active='new' %}
  <div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }}%"></div>
  </div>
  <h2><span class="badge badge-secondary">{{ answered_questions|add:"1" }}/{{total_questions}}</span></h2>
  
  <h2 class="mb-3">{{ quiz.name }}</h2>
  <p class="lead">{{ question.text }}</p>
  {% if question.img %}<img src="{% static 'quiz_img/'|add:question.img %}" class="img-thumbnail" style="max-width: 100%">{% endif %}
  <form method="post" novalidate>
    {% csrf_token %}
    {{ form }}
    <button type="submit" class="btn btn-primary">Next →</button>
  </form>
{% endblock %}
