{% load i18n %}

<div class="panel-block">
  <div class="columns is-centered is-fullwidth">
    <div class="column">
      <table class="table is-bordered is-striped">
        <thead>
          <th class="has-text-centered">
            <span class="icon">
              <i class="fas fa-undo-alt"></i>
            </span>
          </th>
          {% for i in range %}
          <th class="has-text-centered">
            <span class="icon">
              <i class="fas fa-layer-group"></i>
            </span>
            <span>{{ i }}</span>
          </th>
          {% endfor %}
        </thead>

        <tbody>
          {% for line in matrix %}
          {% with loser=forloop.counter %}
          <tr>
            <th class="has-text-centered">
              <span class="icon">
                <i class="fas fa-layer-group"></i>
              </span>
              <span>{{ forloop.counter }}</span>
            </th>

            {% for cell in line %}
            <td class="has-text-centered has-tooltip-primary" {% if cell %}data-tooltip="{% blocktrans with winner=forloop.counter %}L'option {{ winner }} est préférée à l'option {{ loser }} par {{ cell }} voix.{% endblocktrans %}{% endif %}">{{ cell }}</td>
            {% endfor %}
          </tr>
          {% endwith %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="panel-block">
  <i>{% trans "La matrice des résultats montre les points d'avance, l'option gagnante est affichée sur la colonne et la perdante sur la ligne. " %}</i>
</div>
