{% autoescape %}

{% block question %}
<div class="card border-dark mb-3">

  <h5 class="card-header text-white bg-dark">
    {{ i+1 }}.  {{ q['title'] }}
    <div class="pull-right">
      <small>Classificar&nbsp;</small>
      {% if q['answer'] is not None %}
          <i class="fa fa-check-square-o" aria-hidden="true"></i>
      {% else %}
          <i class="fa fa-square-o" aria-hidden="true"></i>
      {% end %}
    </div>
  </h5>

  <div class="card-body">
    <p id="text">
      {{ q['text'] }}
    </p>

    {% block answer %}{% end %}

    {% if t['show_points'] %}
      <p class="text-right">
        <small>
          (Cotação: {{ round(q['points'], 2) }})
        </small>
      </p>
    {% end %}
  </div> <!-- card-body -->

  {% if t['state'] == 'FINISHED' %}
    <div class="card-footer">
      {% if q['grade'] > 0.99 %}
        <p class="text-success">
          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
          {{ round(q['grade'] * q['points'], 2) }}
          pontos<br>
          {{ q['comments'] }}
        </p>
      {% elif q['grade'] > 0.49 %}
        <p class="text-warning">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
          {{ round(q['grade'] * q['points'], 2) }}
          pontos<br>
          {{ q['comments'] }}
        </p>
      {% else %}
        <p class="text-danger">
          <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
          {{ round(q['grade'] * q['points'], 2) }}
          pontos<br>
          {{ q['comments'] }}
        </p>
      {% end %}
    </div> <!-- card-footer -->
  {% end %}


</div>
{% end %}