<li id="tema-link-{{ link.id }}">
  <form class="flex flex-row items-start"
        hx-encoding='multipart/form-data'>
  {% include "fragments/tema/link_icon.html" %}
  <div class="flex flex-col grow my-2">
    <div class="text-sm text-beige">
      <select name="content_type"
              value="{{ link.content_type.value.capitalize() }}"
              class="border border-yellow-50 focus:outline-none
                     rounded
                     text-yellow-50 text-center
                     bg-brown p-0 m-0">
        <option value="{{ link.content_type.value }}">
          {{ link.content_type.value.capitalize() }}
        </option>
        {% for ct in ContentType %}
        {% if ct != link.content_type %}
        <option value="{{ ct.value }}">
          {{ ct.value.capitalize() }}
        </option>
        {% endif %}
        {% endfor %}
      </select>
    </div>
    <div>
    <input name="title"
           placeholder="Títol de l'enllaç"
           value="{{ link.title }}"
           class="border border-beige focus:outline-none
                  rounded w-full
                  bg-brown p-1 my-1"
      />
    </div>
    {% include "fragments/tema/editor/link_url.html" %}
  </div>
  <div class="m-2 text-sm text-beige">
    <button title="Desa els canvis"
            class="mx-1"
            hx-put="/api/tema/{{ link.tema_id }}/link/{{ link.id }}"
            hx-target="#tema-link-{{ link.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/{{ 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>
  </form>
</li>
