{% extends "base.html" %}
{% block title %}Nieuwe wedstrijd — ClayTracker{% endblock %}
{% block content %}
  <h2>Nieuwe wedstrijd aanmaken</h2>
  {% set start_aantal = (form.get('aantal_banen', '1') or '1') | int %}
  <div class="card">
  <form method="post" novalidate>
    <div class="veld">
      <label for="naam">Naam</label>
      <input type="text" id="naam" name="naam" value="{{ form.get('naam', '') }}" required>
    </div>

    <div class="veld">
      <label for="datum">Datum</label>
      <input type="date" id="datum" name="datum" value="{{ form.get('datum', '') }}" required>
    </div>

    <input type="hidden" id="aantal_banen" name="aantal_banen" value="{{ start_aantal }}">

    <h3>Disciplines en aantal duiven per baan</h3>
    {% for i in range(1, max_banen + 1) %}
      <div class="baan-row" data-index="{{ i }}" {% if i > start_aantal %}hidden{% endif %}>
        <label for="discipline_{{ i }}">Baan {{ i }}</label>
        <select id="discipline_{{ i }}" name="discipline_{{ i }}" class="discipline-select">
          <option value="">-- kies discipline --</option>
          {% for discipline in disciplines %}
            <option value="{{ discipline }}" {% if form.get('discipline_' ~ i) == discipline %}selected{% endif %}>{{ discipline }}</option>
          {% endfor %}
          <option value="{{ vrije_tekst_optie }}" {% if form.get('discipline_' ~ i) == vrije_tekst_optie %}selected{% endif %}>{{ vrije_tekst_optie }}</option>
        </select>
        <input type="text" name="discipline_vrij_{{ i }}" class="discipline-vrij"
               placeholder="Eigen discipline"
               value="{{ form.get('discipline_vrij_' ~ i, '') }}"
               {% if form.get('discipline_' ~ i) != vrije_tekst_optie %}hidden{% endif %}>
        <label for="aantal_duiven_{{ i }}">Aantal duiven</label>
        <input type="number" min="1" id="aantal_duiven_{{ i }}" name="aantal_duiven_{{ i }}"
               value="{{ form.get('aantal_duiven_' ~ i, '') }}" required>
      </div>
    {% endfor %}

    <div class="baan-acties">
      <button type="button" id="baan-toevoegen" class="knop-secundair">+ Baan toevoegen</button>
      <button type="button" id="baan-verwijderen" class="knop-secundair">− Baan verwijderen</button>
    </div>

    <button type="submit">Wedstrijd aanmaken</button>
  </form>
  </div>

  <script>
    const VRIJE_TEKST_OPTIE = {{ vrije_tekst_optie | tojson }};
    const MAX_BANEN = {{ max_banen }};

    const aantalBanenInput = document.getElementById('aantal_banen');
    const baanRows = document.querySelectorAll('.baan-row');
    const toevoegenBtn = document.getElementById('baan-toevoegen');
    const verwijderenBtn = document.getElementById('baan-verwijderen');
    let aantalBanen = parseInt(aantalBanenInput.value, 10) || 1;

    function toonBanen(aantal) {
      baanRows.forEach((row) => {
        const index = parseInt(row.dataset.index, 10);
        row.hidden = index > aantal;
      });
      aantalBanenInput.value = aantal;
      toevoegenBtn.hidden = aantal >= MAX_BANEN;
      verwijderenBtn.hidden = aantal <= 1;
    }

    toevoegenBtn.addEventListener('click', () => {
      if (aantalBanen < MAX_BANEN) {
        aantalBanen += 1;
        toonBanen(aantalBanen);
      }
    });

    verwijderenBtn.addEventListener('click', () => {
      if (aantalBanen > 1) {
        aantalBanen -= 1;
        toonBanen(aantalBanen);
      }
    });

    toonBanen(aantalBanen);

    document.querySelectorAll('.discipline-select').forEach((select) => {
      const vrijInput = select.closest('.baan-row').querySelector('.discipline-vrij');
      select.addEventListener('change', () => {
        vrijInput.hidden = select.value !== VRIJE_TEKST_OPTIE;
      });
    });
  </script>
{% endblock %}