<li id="session-editor-row-{{session.id}}"
    class="border rounded border-beige
           flex flex-col grow
           py-2 px-10 m-2 w-full max-w-xl">
  <form>
    <div class="flex flex-row justify-end items-center">
      <button title="Aplica els canvis"
              class="text-beige mx-2"
              hx-put="/api/sessions/editor/{{session.id}}/"
              hx-target="#session-editor-row-{{session.id}}"
              hx-swap="outerHTML">
        <i class="fa fa-check" aria-hidden="true"></i>
      </button>
      <button title="Descarta els canvis"
              class="text-beige mx-2"
              hx-get="/api/sessions/editor/{{session.id}}/"
              hx-target="#session-editor-row-{{session.id}}"
              hx-swap="outerHTML">
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
    </div>
    <div class="flex flex-col items-start pl-5">
      <div>
        <label for="session-editor-row-{{session.id}}-date">
          Data:
        </label>
        <input type="date" name="date"
               value="{{ session.date.strftime('%Y-%m-%d') }}"
               min="2022-01-01"
               max="2050-12-31"
               class="border-none focus:outline-none
                      text-yellow-50 text-center
                      bg-brown p-0 m-0
                      session-editor-{{session.id}}"
               />
      </div>
      <div>
        <label for="session-editor-row-{{session.id}}-start-time">
          Hora d'inici:
        </label>
        <input type="time" name="start_time"
               value="{{ session.start_time.strftime('%H:%M') }}"
               step="60"
               class="border-none focus:outline-none
                      text-yellow-50 text-center
                      bg-brown p-0 m-0
                      session-editor-{{session.id}}"
               />
      </div>
      <div>
        <label for="session-editor-row-{{session.id}}-end-time">
          Hora final:
        </label>
        <input type="time" name="end_time"
               value="{{ session.end_time.strftime('%H:%M') }}"
               step="60"
               class="border-none focus:outline-none
                      text-yellow-50 text-center
                      bg-brown p-0 m-0
                      session-editor-{{session.id}}"
               />
      </div>
      <div>
        <label for="session-editor-row-{{session.id}}-venue-name">
          Lloc:
        </label>
        <input list="llocs" name="venue_name"
               placeholder="nom del lloc"
               value="{{ session.venue.name or "" }}"
               class="border border-yellow-50 focus:outline-none
                      rounded
                      text-yellow-50 text-center
                      bg-brown p-0 m-0
                      session-editor-{{session.id}}"
               />
        <datalist id="llocs">
          <option value="la FEM">
          <option value="Cal Temerari">
        </datalist>
      </div>
      <div>
        <label for="session-editor-row-{{session.id}}-venue-url">
          Link:
        </label>
        <input placeholder="URL del lloc" name="venue_url"
               value="{{ session.venue.url or "" }}"
               class="border border-yellow-50 focus:outline-none
                      rounded
                      text-yellow-30 text-center
                      bg-brown p-0 m-0 my-1
                      session-editor-{{session.id}}"
               />
      </div>
    </div>
  </form>
</li>
