<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">
{% if tema.stats %}
  <div class="flex flex-col">
    {% if tema.played_with %}
    <div class="my-2 flex flex-row items-center">
      <i class="mx-2 flex-none">{% include "icons/notes-small.svg" %}</i>
      <p>
        S'ha tocat juntament amb:
      </p>
    </div>
    <ol class="ml-4 flex flex-col justify-center">
      {% for co_tema in tema.played_with %}
        {% set tema = co_tema.tema %}
        {% include "fragments/tema/played_with.html" %}
      {% endfor %}
    </ol>
    {% endif %}
    <div class="my-2 flex flex-row items-center">
      <i class="mx-2 flex-none">{% include "icons/music-box.svg" %}</i>
      <p>
        S'ha tocat en
        {% if tema.stats.times_played == 1%}
          una sessió:
        {% else %}
          {{ tema.stats.times_played }} sessions:
        {% endif %}
      </p>
    </div>
    <ol class="ml-4 flex flex-col justify-center">
      {% for session in tema.stats.sessions_played %}
      <li class="flex flex-row grow
                 my-1">
        <a class="flex flex-row grow items-center"
           href="/sessio/{{session.id}}">
          <i class="mx-2 text-beige flex-none">{% include "icons/calendar.svg" %}</i>
          <p>
            {% set dn = date_names(session.date) %} {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
          </p>
        </a>
      </li>
      {% endfor %}
    </ol>
  </div>
{% else %}
<div>
  <i>No s'ha tocat a cap jam (encara)</i>
</div>
{% endif %}
