{% autoescape %}


{% block question %}
  {% if q['answer'] is not None %}

    <div class="card border-dark mb-3">
      <h5 class="card-header text-white bg-dark">
        {{ q['number'] }}.  {{ q['title'] }}
        <div class="pull-right">
          <small>Classificar&nbsp;</small>
              <i class="fa fa-check-square-o" aria-hidden="true"></i>
        </div>
      </h5> <!-- card-header -->

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

        {% block answer %}{% end %}

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

      <div class="card-footer">
        {% if q['grade'] > 0.99 %}
          <p class="text-success">
            <i class="fa fa-thumbs-o-up fa-3x" 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 fa-3x" 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 fa-3x" aria-hidden="true"></i>
            {{ round(q['grade'] * q['points'], 2) }}
            pontos<br>
            {{ q['comments'] }}
          </p>
        {% end %}
      </div> <!-- card-footer -->
    </div> <!-- card -->

  {% else %}

    <div class="card border-secondary mb-3">
      <h5 class="card-header text-white bg-secondary">
        {{ q['number'] }}.  {{ q['title'] }}
        <div class="pull-right">
          <small>Classificar&nbsp;</small>
          <i class="fa fa-square-o" aria-hidden="true"></i>
        </div>
      </h5> <!-- card-header -->

      <div class="card-body text-secondary">
        <p id="text">
          {{ md(q['text'], q) }}
        </p>

        {% block answer %}{% end %}

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

      <div class="card-footer">
        <p class="text-secondary">
          <i class="fa fa-ban fa-3x" aria-hidden="true"></i>
          {{ round(q['grade'] * q['points'], 2) }} pontos<br>
          {{ q['comments'] }}
        </p>
      </div> <!-- card-footer -->
    </div> <!-- card -->
  {% end %} <!-- if answer not None -->
{% end %} <!-- block -->