{% extends "admin/base.html" %}
{% block title %}Neue Tabelle{% endblock %}
{% block content %}

<section>
  <h2>Neue Tabelle anlegen</h2>
  <form method="post" class="schema-form">
    <label class="field">
      <span>Titel</span>
      <input type="text" name="title" required placeholder="z. B. Projekttage Streetfotografie – Stationen"
             value="{{ title or '' }}">
    </label>

    <h3>Spalten</h3>
    <div id="columns">
      {% set prefill = columns or [
        {"label": "Nr.", "type": "number"},
        {"label": "Titel", "type": "text"},
        {"label": "Beschreibung", "type": "text_long"},
        {"label": "Link", "type": "url"},
        {"label": "Bewertung", "type": "rating_5"},
      ] %}
      {% for col in prefill %}
      <div class="column-row">
        <input type="text" name="label" placeholder="Spaltenname" value="{{ col.label }}">
        <select name="type">
          {% for value, label in types.items() %}
          <option value="{{ value }}" {% if col.type == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
        <button type="button" class="btn btn-danger remove-row">–</button>
      </div>
      {% endfor %}
    </div>
    <p><button type="button" class="btn" id="add-row">+ Spalte</button></p>

    <p class="hint">Leere Spaltennamen werden übersprungen. Link-Spalten bekommen
    automatisch QR-Codes; mehrere Link-Spalten sind möglich.</p>

    <button type="submit" class="btn btn-primary">Tabelle anlegen</button>
  </form>
</section>

<script>
const columns = document.getElementById("columns");
document.getElementById("add-row").addEventListener("click", () => {
  const row = columns.querySelector(".column-row").cloneNode(true);
  row.querySelector("input").value = "";
  row.querySelector("select").selectedIndex = 0;
  columns.appendChild(row);
});
columns.addEventListener("click", e => {
  if (e.target.classList.contains("remove-row") && columns.children.length > 1) {
    e.target.closest(".column-row").remove();
  }
});
</script>
{% endblock %}