{% extends "pohja.html" %}
{% block sisalto %}

<h2>Tulevat varaukset</h2>
<div id="luettelo">
  {% include "luettelo.html" %}
</div>

<h2>Uusi varaus</h2>
{% if session.kayttaja %}
  {% include "lomake.html" %}
{% else %}
  <p>Kirjaudu sisään tehdäksesi varauksen.</p>
{% endif %}

<details>
  <summary>Mitä sivulla tapahtuu?</summary>
  <p>Sivulla ei ole omaa javascriptiä. Lomakkeen <code>hx-post</code>-attribuutti
  lähettää lomakkeen, <code>hx-target</code> kertoo mihin vastaus sijoitetaan ja
  palvelin palauttaa HTML-palasen. Poistopainikkeessa on <code>hx-delete</code>,
  <code>hx-confirm</code> ja <code>hx-swap="delete"</code>. Avaa
  kehittäjätyökalujen Network-välilehti ja katso pyyntöjen otsakkeet.</p>
  <p>Ilman javascriptiä samat lomakkeet toimivat tavallisina lomakkeina:
  palvelin tunnistaa htmx-pyynnön <code>HX-Request</code>-otsakkeesta ja palauttaa
  muille kokonaisen sivun tai uudelleenohjauksen.</p>
</details>
{% endblock %}