<form id="tema-lyric-{{ lyric.id }}">
  <h5 class="text-sm text-beige text-right">
    <input name="title"
           placeholder="Nom de la lletra"
           value="{{ lyric.title }}"
           class="border border-beige focus:outline-none
                  rounded
                  bg-brown px-2 "
      />
    <input name="max_columns"
           type="number"
           min="1"
           max="10"
           placeholder="3 (default)"
           value="{{ lyric.max_columns or '' }}"
           class="border border-beige focus:outline-none
                  rounded
                  bg-brown px-2 ml-2 w-16 "
      />
    <button title="Desa els canvis"
            class="mx-1"
            hx-put="/api/tema/{{ lyric.tema_id }}/lyric/{{ lyric.id }}"
            hx-target="#tema-lyric-{{ lyric.id }}"
            hx-swap="outerHTML">
      <i class="fa fa-check" aria-hidden="true"></i>
    </button>
    <button title="Descarta els canvis"
            class="mx-1"
            hx-get="/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>
  </h5>
  <hr class="h-px mt-1 mb-3 bg-beige border-0">
  <textarea name="content"
      placeholder="Lletra"
      rows="{{ lyric.content.count('\n') + 1 }}"
      class="border border-beige focus:outline-none
             w-full text-center
             rounded
             bg-brown p-2 m-0">
{{ lyric.content }}
  </textarea>
</form>
