<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/llista/{{ playlist_id }}/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/llista/{{ playlist_id }}/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>
  {% if logged_in and tema_entry.tema %}
    {% set available_scores = tema_entry.tema.scores | selectattr('hidden', 'equalto', false) | list %}
    {% if available_scores | length > 1 %}
  <div class="flex flex-row items-center my-1 w-full text-sm">
    <span class="text-gray-600 mr-2">Partitura:</span>
    <select class="border border-beige bg-beige rounded p-1 text-sm"
            hx-put="/api/llista/{{ playlist_id }}/set/{{ set_id }}/tema/{{ tema_entry.id }}/score"
            hx-target="#tune-entry-{{ tema_entry.id }}"
            hx-swap="outerHTML"
            name="score_id">
      <option value="-1" {% if not tema_entry.score_id %}selected{% endif %}>
        (Per defecte)
      </option>
      {% for score in available_scores %}
      <option value="{{ score.id }}"
              {% if tema_entry.score_id == score.id %}selected{% endif %}>
        {{ score.title or 'Partitura ' ~ loop.index }}
      </option>
      {% endfor %}
    </select>
  </div>
    {% endif %}
  {% endif %}
  <div class="my-1 w-full">
  {% set effective_score = tema_entry.get_effective_score() %}
  {% if effective_score and effective_score.preview_url %}
    <img class="pb-2"
        src="{{ effective_score.preview_url }}" />
  {% endif %}
  </div>
</li>
