<div class="flex-none px-4 py-2 w-80 h-80 m-2 border-solid border rounded-md bg-yellow-50 text-brown">
  <div class="flex flex-col h-full">
    <div class="text-xl text-beige">
      <a href="/tema/{{ tema.id }}">
        {{ tema.title }}
      </a>
    </div>
    <div class="grow"></div>
    <div class="flex flex-row">
    </div>
      <ul class="flex flex-row items-center justify-center">
        {% if tema.links %}
          {% for link in tema.links %}
            <li class="p-2 m-2 text-beige border border-beige rounded-md">
              <a href="{{ link.url }}" target="_blank">
              {% if link.type == LinkType.AUDIO %}
                {% if link.subtype == LinkSubtype.SPOTIFY %}
                  {% include "icons/spotify.svg" %}
                {% elif link.subtype == LinkSubtype.YOUTUBE %}
                  {% include "icons/youtube.svg" %}
                {% else %}
                  {% include "icons/notes.svg" %}
                {% endif %}
              {% elif link.type == LinkType.SCORE %}
                {% if link.subtype == LinkSubtype.PDF %}
                  {% include "icons/pdf.svg" %}
                {% else %}
                  {% include "icons/link.svg" %}
                {% endif %}
              {% else %}
                {% include "icons/link.svg" %}
              {% endif %}
              </a>
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    <!-- {% if logged_in %} -->
    <!--   <div> -->
    <!--     Edita -->
    <!--   </div> -->
    <!-- {% endif %} -->
  </div>
</div>
