<li class="border rounded border-beige
            flex flex-row grow
            p-2 m-2 w-full max-w-xl
            relative"
    id="session-row-{{session.id}}">
  <a href="/session/{{session.id}}">
  <div class="flex flex-row grow items-center">
    <div class="flex-1">
      <a href="/sessio/{{session.id}}/">
      {% include "fragments/sessions/session_date.html" %}
      </a>
    </div>
    <div class="ml-auto">
      <a title="Més informació"
         class="text-beige mx-1"
         href="/sessio/{{session.id}}/">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </a>
      {% if logged_in %}
      <button title="Edita la sessió"
              class="text-beige mx-1"
              hx-get="/api/sessions/editor/{{session.id}}/edita"
              hx-target="#session-row-{{session.id}}"
              hx-swap="outerHTML">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
      <button title="Esborra la sessió"
              class="text-beige mx-1"
              hx-delete="/api/sessions/editor/{{session.id}}/"
              hx-target="#session-row-{{session.id}}"
              hx-swap="outerHTML swap:0.5s">
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
      {% endif %}
    </div>
  </div>
  {% if session.id == next_session_id %}
      <div class="absolute -top-5 -left-6
                   bg-beige text-xs font-bold
                   px-2 py-1
                   transition-opacity duration-200
                   rounded">
        Propera<br>sessió
      </div>
  {% endif %}
</li>
