<li id="tema-link-{{ link.id }}"
    class="flex flex-row items-start">
  {% include "fragments/tema/link_icon.html" %}
  <div class="my-2">
    <p class="text-sm text-beige">
      {{ link.content_type.value.capitalize() }}
    </p>
    {% if link.title %}
    <p>{{ link.title }}</p>
    {% endif %}
  </div>
  {% if logged_in %}
  <div class="grow"></div>
  <div class="m-2 text-sm text-beige">
      <button title="Modifica l'enllaç"
              class="mx-1"
              hx-get="/api/tema/{{ link.tema_id }}/editor/link/{{ link.id }}"
              hx-target="#tema-link-{{ link.id }}"
              hx-swap="outerHTML">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
      <button title="Esborra l'enllaç"
              class="mx-1"
              hx-delete="/api/tema/{{ link.tema_id }}/link/{{ link.id }}"
              hx-target="#tema-link-{{ link.id }}"
              hx-swap="outerHTML">
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
  </div>
  {% endif %}
</li>
