{% 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="float-right">
          <small>Classificar&nbsp;</small>
          <i class="far fa-check-square" aria-hidden="true"></i>
        </div>
      </h5> <!-- card-header -->

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

        {% 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="far fa-thumbs-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="fas fa-exclamation-triangle fa-3x" aria-hidden="true"></i>
            {{ round(q['grade'] * q['points'], 2) }}
            pontos<br>
            {{ q['comments'] }}
            {% if 'solution' in q %}
              <hr>
              {{ md('**Solução:** ' + q['solution']) }}
            {% end %}
          </p>
        {% else %}
          <p class="text-danger">
            <i class="far fa-thumbs-down fa-3x" aria-hidden="true"></i>
            {{ round(q['grade'] * q['points'], 2) }}
            pontos<br>
            {{ q['comments'] }}
            {% if 'solution' in q %}
              <hr>
              {{ md('**Solução:** ' + q['solution']) }}
            {% end %}
          </p>
        {% end %}

        {% if t['show_ref'] %}
          <code>{{q['ref']}}</code>
        {% 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="float-right">
          <small>Classificar&nbsp;</small>
          <i class="far fa-square" aria-hidden="true"></i>
        </div>
      </h5> <!-- card-header -->

      <div class="card-body text-secondary">
        <p id="text">
          {{ md(q['text']) }}
        </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="fas fa-ban fa-3x" aria-hidden="true"></i>
          {{ round(q['grade'] * q['points'], 2) }} pontos<br>
          {{ q['comments'] }}
          {% if 'solution' in q %}
            <hr>
            {{ md('**Solução:** ' + q['solution']) }}
          {% end %}
        </p>

        {% if t['show_ref'] %}
          <code>{{ q['ref'] }}</code>
        {% end %}

      </div> <!-- card-footer -->
    </div> <!-- card -->
  {% end %} <!-- if answer not None -->
{% end %} <!-- block -->