<li id="tune-entry-{{ tema_entry.id }}"
    class="flex flex-col w-full">
  <div class="flex flex-row my-1 w-full">
    <div class="flex-1 min-w-0
                text-black font-bold
                break-words block">
    {% if tema_entry.tema %}
      {{ tema_entry.tema.title }}
    {% else %}
      <i class="fa fa-question" aria-hidden="true"></i>
      <i>(Desconegut)</i>
    {% endif %}
    </div>
    {% if logged_in %}
    <div class="flex-none flex flex-row shrink-0">
      <button title="Edita el tema"
              class="text-beige mx-1"
              hx-get="/api/sessio/{{ session_id }}/playlist/set/{{ set_id }}/tema/{{ tema_entry.id }}/editor"
              hx-target="#tune-entry-{{ tema_entry.id }}"
              hx-swap="outerHTML">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
      <button title="Esborra el tema"
              class="text-beige mx-1"
              hx-delete="/api/sessio/{{ session_id }}/playlist/set/{{ set_id }}/tema/{{ tema_entry.id }}"
              hx-target="#tune-entry-{{ tema_entry.id }}"
              hx-swap="outerHTML">
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
    </div>
    {% endif %}
  </div>
  <div class="my-1 w-full">
  {% if tema_entry.tema and tema_entry.tema.main_score() and tema_entry.tema.main_score().preview_url %}
    <img class="pb-2"
        src="{{ tema_entry.tema.main_score().preview_url }}" />
  {% endif %}
  </div>
</li>
