<div id="tema-lyric-{{ lyric.id }}">
  <h5 class="text-sm text-beige text-right">
    {{ lyric.title }}
    {% if logged_in and lyric.max_columns %}
    <span class="text-xs ml-2">{{ lyric.max_columns }} columnes</span>
    {% endif %}
    {% if logged_in %}
    <button title="Modifica la lletra"
            class="mx-1"
            hx-get="/api/tema/{{ lyric.tema_id }}/editor/lyric/{{ lyric.id }}"
            hx-target="#tema-lyric-{{ lyric.id }}"
            hx-swap="outerHTML">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </button>
    <button title="Esborra la lletra"
            class="mx-1"
            hx-delete="/api/tema/{{ lyric.tema_id }}/lyric/{{ lyric.id }}"
            hx-target="#tema-lyric-{{ lyric.id }}"
            hx-swap="outerHTML">
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
    {% endif %}
  </h5>
  <hr class="h-px mt-1 mb-3 bg-beige border-0">
  <div class="text-center">
  {{ (lyric.content.replace('~', '')).replace('\n', '<br>') | safe }}
  </div>
</div>
