<div>
  <h1>Training <?= $trainingid?'Bearbeiten':'Hinzufügen'; ?></h1>

  <form id="trainingeditform" hx-post="/trainings/edit" hx-encoding='multipart/form-data' hx-target="#response" class="container">
    <input type="hidden" name="training_id" value="<?= $trainingid; ?>">
    <div class="row">
      <div class="col-md">
        <div class="mb-3 mb-md-4">
          <label for="training_date">Datum</label>
          <input type="date" value="<?= $trainingdata['date']; ?>" id="date" name="training_date" class="form-control">
        </div>

        <div class="mb-3 mb-md-4">
          <label for="training_focus">Trainingsfokus</label>
          <select class="form-select" aria-label="Trainingsfokus" id="training_focus" name="training_focus">
            <option value="_none">- None -</option>
            <option value="1">Parcourlauf</option>
            <option value="2">Distanzarbeit</option>
            <option value="3">Führtechnik</option>
            <option value="4">Einzelgeräte</option>
            <option value="5">Geräteunterscheidung</option>
          </select>
        </div>

        <div class="mb-3 mb-md-4">
            <label for="training_url">Video</label>
            <input type="text" value="<?= $trainingdata['url']; ?>" id="training_url" name="training_url"  placeholder="https://www.youtube.com/..." class="form-control">
        </div>

        <div class="mb-3 mb-md-4">
          <label for="training_mood_barometer_human">Stimmungsbarometer Mensch</label>
          <select class="form-select" aria-label="Stimmungsbarometer Mensch" id="training_mood_barometer_human" name="training_mood_barometer_human">
            <option value="_none">- None -</option>
            <option value="1">😕</option>
            <option value="2">🙁</option>
            <option value="3">😐</option>
            <option value="4">😊</option>
            <option value="5">🤩</option>
          </select>
        </div>
  
        <div class="mb-3 mb-md-4">
          <label for="training_mood_barometer_dog">Stimmungsbarometer Hund</label>
          <select class="form-select" aria-label="Stimmungsbarometer Hund" id="training_mood_barometer_dog" name="training_mood_barometer_dog">
            <option value="_none">- None -</option>
            <option value="1">😕</option>
            <option value="2">🙁</option>
            <option value="3">😐</option>
            <option value="4">😊</option>
            <option value="5">🤩</option>
          </select>
        </div>

        <div>
            <label for="uploads">Uploads</label>
            <input type="file" accept="image/png, image/jpeg, image/gif" id="uploads" class="form-control" name="photos[]" multiple>
        </div>
      </div>

      <div class="col-md">
        <div class="mb-3 mb-md-4">
            <label for="training_that_worked">Das hat gut geklappt</label>
            <textarea id="training_that_worked" name="training_that_worked" class="form-control" rows="4"><?= $trainingdata['text']; ?></textarea>
        </div>

        <div class="mb-3 mb-md-4">
            <label for="training_more_excercise">Das müssen wir intensiver üben</label>
            <textarea id="training_more_excercise" name="training_more_excercise" class="form-control" rows="4"><?= $trainingdata['text']; ?></textarea>
        </div>

        <div class="mb-3 mb-md-4">
            <label for="training_text">Notizen</label>
            <textarea id="training_text" name="training_text" class="form-control" rows="4"><?= $trainingdata['text']; ?></textarea>
        </div>
        <div class="text-end">
          <button type="submit" name="submit" value="true" class="btn btn-primary text-end d-inline-block">Hinzufügen</button>
        </div>
      </div>
    </div>
  </form>
  <div id="response"></div>
</div>