<li class="flex flex-col
           items-center
           m-4 rounded-lg
           bg-white">
  <div class="flex flex-col items-start py-4 text-left w-full max-w-[655px]">
    <div class="px-4 text-black font-bold">
      <a href="/tema/{{ tema.id }}">
        {{ tema.title }}
      </a>
    </div>
    {% if tema.properties %}
    <ul class="flex flex-wrap text-sm px-3">
      {% for property in tema.properties %}
      {% set hx_vars = build_hx_vars({"properties": add_property_str(property.value)}, order_params_dict) %}
      <button class="bg-beige text-white rounded
                     m-1 px-2"
              hx-get="/api/content/temes"
              hx-target="#content"
              hx-include="[name=query]"
              hx-vars="{{ hx_vars }}"
              hx-swap="innerHTML"
              >
        {{ property.value }}
      </button>
      {% endfor %}
    </ul>
    {% endif %}
    {% if tema.main_score() and tema.main_score().preview_url %}
      <a href="/tema/{{ tema.id }}">
      <img class="px-4 pb-2"
          src="{{ tema.main_score().preview_url }}" />
      </a>
    {% endif %}
    <div class="flex flex-row w-full">
      <div class="flex flex-row items-center
                  row-0 px-4 text-sm text-gray-400">
        <i class="mx-1">{% include "icons/music-box.svg" %}</i>
        {% if tema.stats %}
          Tocat {{ tema.stats.times_played }}
          {% if tema.stats.times_played == 1 %}
            cop
          {% else %}
            cops
          {% endif %}
        {% else %}
          No s'ha tocat mai
        {% endif %}
      </div>
      <div class="flex-1 grow"></div>
      <div class="flex flex-row items-center
                  row-0 px-4 text-sm text-gray-400">
        {% if tema.stats and tema.stats.sessions_played %}
          <i class="mx-1">{% include "icons/calendar.svg" %}</i>
          {% set dn = get_date_names(tema.stats.sessions_played[0].date) %}
          {{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
        {% endif %}
      </div>
    </div>
  </div>
</li>
