<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 %}
      <a class="bg-beige text-white rounded
                     m-1 px-2"
              href="/temes?properties={{ property.value }}">
        {{ property.value }}
      </a>
      {% 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 co_tema.count == 1 %}
          1 cop
        {% else %}
          {{ co_tema.count }} cops
        {% endif %}
      </div>
    </div>
  </div>
</li>
