{% include "fragments/menu.html" %}
<div class="p-12 text-center">
  <h3 class="text-3xl text-beige p-4">Llistes de Repertori</h3>
  {% if logged_in %}
  <button title="Afegeix una llista"
          class="text-beige m-2"
          hx-post="/api/llistes/editor/"
          hx-target="#{{ playlist_list_id }}"
          hx-swap="afterbegin transition:true">
    <i class="fa fa-plus" aria-hidden="true"></i>
    Afegeix una llista
  </button>
  {% endif %}
  <div id="{{ playlist_list_id }}"
       class="flex flex-col items-center">
  {% if playlists %}
      {% for playlist in playlists %}
        {% include "fragments/llistes/playlist_entry.html" %}
      {% endfor %}
  {% else %}
    <div class="text-center py-8">
      <p class="text-beige/70">No hi ha llistes disponibles.</p>
    </div>
  {% endif %}
  </div>
</div>