{% if tema.stats %}
  <h4 class="pt-4 text-xl mt-3 text-beige">Estadístiques</h4>
  <hr class="h-px mt-1 mb-3 bg-beige border-0">
  <div>
    <p>
      Aquest tema ha sigut tocat en
      {% if tema.stats.times_played == 1%}
        una sessió.
      {% else %}
        {{ tema.stats.times_played }} sessions.
      {% endif %}
    </p>
    <p class="py-2">
      S'ha tocat a les sessions següents:
      <ol class="flex flex-col items-center justify-center">
        {% for session in tema.stats.sessions_played %}
        <li class="border rounded border-beige
                    flex flex-row grow
                    p-2 m-2 w-full max-w-xl
                    relative">
          <a href="/session/{{session.id}}">
          <div class="flex flex-row grow items-center">
            <div class="flex-1">
              <a href="/sessio/{{session.id}}/">
                {% set dn = date_names(session.date) %}
                {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
              </a>
            </div>
            <div class="ml-auto">
              <a title="Més informació"
                class="text-beige mx-1"
                href="/sessio/{{session.id}}/">
                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
              </a>
            </div>
          </div>
        </li>
        {% endfor %}
      </ol>
    </p>
  </div>
{% endif %}
