<form id="tema-property-{{ property.id }}"
     class="flex flex-row items-center">
  <div class="px-2">
    <select name="field"
            value="{{ property.field.value.capitalize() }}"
            class="border border-yellow-50 focus:outline-none
                   rounded
                   text-yellow-50 text-center
                   bg-brown p-1 m-0">
      <option value="{{ property.field.value }}">
        {{ property.field.value.capitalize() }}
      </option>
      {% for pf in PropertyField %}
      {% if pf != property.field %}
      <option value="{{ pf.value }}">
        {{ pf.value.capitalize() }}
      </option>
      {% endif %}
      {% endfor %}
    </select>
  </div>
  <div class="grow mx-2">
    <input name="value"
           placeholder="Informació"
           value="{{ property.value }}"
           class="border border-beige focus:outline-none
                  rounded w-full
                  bg-brown px-2 py-1"
      />
  </div>
  <button title="Desa els canvis"
          class="text-sm text-beige mx-1"
          hx-put="/api/tema/{{ property.tema_id }}/property/{{ property.id }}"
          hx-target="#tema-property-{{ property.id }}"
          hx-swap="outerHTML">
    <i class="fa fa-check" aria-hidden="true"></i>
  </button>
  <button title="Descarta els canvis"
          class="text-sm text-beige mx-1"
          hx-get="/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>
</form>
