{{ define "uuid" }}
<span>{{ . }}</span>
{{ end }}

{{ define "participant" }}
<div id="participant-{{ . }}">
  <label for="participant-first-input-{{ . }}">Vorname</label>
  <input type="text" name="participant-first-{{ . }}" id="participant-first-input-{{ . }}" />

  <label for="participant-last-input-{{ . }}">Nachname</label>
  <input type="text" name="participant-last-{{ . }}" id="participant-last-input-{{ . }}" />

  <label for="participant-company-input-{{ . }}">Firma</label>
  <input type="text" name="participant-company-{{ . }}" id="participant-company-input-{{ . }}" />

  <button type="button" hx-post="/generate-uuid/" hx-target="this" hx-swap="outerHTML">
    Einladen
  </button>
</div>
{{ end }}

{{ define "content" }}
<form>
  <div id="instructor">
    <label for="instructor-first-input">Unterweiser Vorname</label>
    <input type="text" name="instructor-first" id="instructor-first-input" />

    <label for="instructor-last-input">Unterweiser Nachname</label>
    <input type="text" name="instructor-last" id="instructor-last-input" />
  </div>

  <div id="date">
    <label for="date-input">Datum</label>
    <input type="date" name="date" id="date-input" />
  </div>

  <div id="time">
    <label for="time-input">Uhrzeit</label>
    <input type="time" name="time" id="time-input" />
  </div>

  <div id="state">
    <label for="state-input">Stand vom</label>
    <input type="date" name="state" id="state-input" />
  </div>

  <div id="location">
    <label for="location-input">Ort</label>
    <input type="text" name="location" id="location-input" />
  </div>

  <div id="participants">
    <button type="button" hx-post="/add-participant/" hx-target="#participants" hx-swap="beforeend" hx-trigger="click">
      Neuer Teilnehmer
    </button>

    {{ template "participant" . }}
  </div>

  <button type="submit" hx-post="/submit-form/" hx-target="#content" hx-swap="innerHTML">
    Senden
  </button>
</form>
{{ end }}