<div class="
            border rounded border-beige
            p-2 m-2 w-full max-w-xl
            relative"
     id="playlist-entry-{{ playlist.id }}">
    <div class="flex justify-between items-start">
    <div class="flex-1">
        <p class="text-xl text-white">
        <a href="/llista/{{ playlist.id }}">
            {% if playlist.name %}
            {{ playlist.name }}
            {% else %}
            Llista de temes
            {% endif %}
        </a>
        </p>
    </div>

        {% if logged_in %}
        <div class="ml-auto">
            {% include "fragments/llistes/playlist_visibility.html" %}
            <button title="Esborra la llista"
                    class="text-beige mx-1"
                    hx-delete="/api/llistes/{{ playlist.id }}"
                    hx-target="#playlist-entry-{{ playlist.id }}"
                    hx-swap="outerHTML swap:0.5s">
              <i class="fa fa-times" aria-hidden="true"></i>
            </button>
        </div>
    {% endif %}
    </div>
</div>
