<div id="tema-property-{{ property.id }}"
     class="flex flex-row items-center">
  <div class="px-2">
    <i>{{ property.field.value.capitalize() }}:</i>
  </div>
  <a class="bg-beige text-white rounded m-1 px-2"
     href="/temes?query=&properties={{ property.value }}">
    {{ property.value }}
  </a>

  {% if logged_in %}
  <div class="grow"></div>
  <button title="Modifica la informació"
          class="text-sm text-beige mx-1"
          hx-get="/api/tema/{{ property.tema_id }}/editor/property/{{ property.id }}"
          hx-target="#tema-property-{{ property.id }}"
          hx-swap="outerHTML">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </button>
  <button title="Esborra la informació"
          class="text-sm text-beige mx-1"
          hx-delete="/api/tema/{{ property.tema_id }}/property/{{ property.id }}"
          hx-target="#tema-property-{{ property.id }}"
          hx-swap="outerHTML">
    <i class="fa fa-times" aria-hidden="true"></i>
  </button>
  {% endif %}
</div>
