{% if logged_in or tema.lyrics %}
<h4 class="text-xl text-beige">Lletra</h4>
{% endif %}

{% if tema.lyrics %}
{% for lyric in tema.lyrics %}
  {% include "fragments/tema/lyric.html" %}
{% endfor %}
{% endif %}

{% if logged_in %}
<div id="new-lyric-target"></div>
<div class="flex flex-row my-2 justify-end">
  <button title="Afegeix una lletra"
          class="text-sm text-beige text-right"
          hx-post="/api/tema/{{ tema.id }}/lyric"
          hx-target="#new-lyric-target"
          hx-swap="beforebegin">
    <i class="fa fa-plus" aria-hidden="true"></i>
    Afegeix una lletra
  </button>
</div>
{% endif %}