<!-- das hier sollte bei einem Turnier mehrfach hinzugefügt werden können. Auswahl aus Agility & Jumping -->
<div>
  <h1>Lauf <?= $run_id?'Bearbeiten':'Hinzufügen'; ?></h1>

  <form id="tournamenteditform" hx-post="/runs/validate" hx-encoding='multipart/form-data' hx-target="#response">
    <input type="hidden" name="tournament_id" value="<?= $tournament_id; ?>">
    <input type="hidden" name="run_id" value="<?= $run_id; ?>">
    <h2>Parcourdetails</h2>
    <div>
      <label for="name">Bezeichnung</label>
      <input type="text" value="<?= $run['name']; ?>" id="name" name="name"  placeholder="zb: Oldies Jumping" required>
    </div>
    <div>
      <label for="category">Parcourtyp</label>
      <select id="category" name="category" >
        <option value="Agility" <?= $run['category']=='Agility'?'selected':''; ?>>Agility</option>
        <option value="Jumping" <?= $run['category']=='Jumping'?'selected':''; ?>>Jumping</option>
      </select>
    </div>
    <div>
        <label for="length">Parcourlänge (in m)</label>
        <input type="number" min="1" max="1000" value="<?= $run['length']; ?>" id="length" name="length"  placeholder="Max">
    </div>
    <div>
        <label for="time_standard">Normzeit</label>
        <input type="number" value="<?= $run['time_standard']?:0; ?>" id="time_standard" name="time_standard"  placeholder="Zuchtname">
    </div>
    <div>
        <label for="time_max">Maxzeit</label>
        <input type="number" value="<?= $run['time_max']?:0; ?>" id="time_max" name="time_max"  placeholder="Flowbite">
    </div>

    <div class="mb-3 mb-md-4">
        <label for="referee">Richter</label>
        <input type="text" value="<?= $run['referee']; ?>" id="referee" name="referee"  placeholder="Franz Ferdinand" class="form-control">
    </div>
    <button type="submit" name="submit" value="true" class="btn btn-primary">Submit</button> <!-- Submit Button führt auf eine neue Seite wo man die Laufinfo eingibt -->
  </form>
  <progress id='progress' value='0' max='100'></progress>
  <div id="response"></div>
</div>

<script>
  htmx.on('#dogeditform', 'htmx:xhr:progress', function(evt) {
    htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
  });
</script>