{{define "form_new"}}
{{template "header" .}}
<div class="page-header d-flex justify-content-between align-items-center">
  <div>
    <h1 class="h3 mb-0"><i class="bi bi-plus-circle me-2 text-primary"></i>Neues Formular</h1>
    <p class="text-muted small mb-0 mt-1">Geben Sie einen Titel und beliebig viele Felder an.</p>
  </div>
  <a href="/" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Zurück</a>
</div>
{{template "alert" .}}

<form method="post" action="/forms" id="form-builder" class="needs-validation" novalidate>
  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

  {{/* ── Meta card ───────────────────────────────────────────────── */}}
  <div class="card mb-4">
    <div class="card-header fw-semibold">
      <i class="bi bi-info-circle me-2 text-primary"></i>Allgemein
    </div>
    <div class="card-body">
      <div class="form-floating mb-3">
        <input type="text" id="title" name="title" class="form-control" placeholder="Titel" required>
        <label for="title">Titel *</label>
        <div class="invalid-feedback">Bitte Titel eingeben.</div>
      </div>
      <div class="form-floating mb-3">
        <textarea id="description" name="description" class="form-control textarea-sm" placeholder="Beschreibung"></textarea>
        <label for="description">Beschreibung <span class="text-muted fw-normal">(optional)</span></label>
      </div>

      {{/* ── Zeitraum ──────────────────────────────────────────────── */}}
      <div class="row g-3 mb-3">
        <div class="col-sm-6">
          <label for="opens_at" class="form-label small fw-semibold"><i class="bi bi-door-open me-1 text-success"></i>Öffnet am</label>
          <input type="datetime-local" id="opens_at" name="opens_at" class="form-control form-control-sm">
          <div class="form-text">Leer = sofort geöffnet</div>
        </div>
        <div class="col-sm-6">
          <label for="closes_at" class="form-label small fw-semibold"><i class="bi bi-door-closed me-1 text-danger"></i>Schließt am</label>
          <input type="datetime-local" id="closes_at" name="closes_at" class="form-control form-control-sm">
          <div class="form-text">Leer = kein Ablaufdatum</div>
        </div>
      </div>

      {{/* ── Gast-Zugang ──────────────────────────────────────────── */}}
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" name="allow_guest" id="allow_guest" value="1" role="switch">
        <label class="form-check-label" for="allow_guest">
          <i class="bi bi-globe me-1 text-primary"></i>Öffentlicher Gast-Zugang
          <span class="text-muted fw-normal small ms-1">— Formular ohne Login ausfüllbar (Link: <code>/g/{id}</code>)</span>
        </label>
      </div>
    </div>
  </div>

  {{/* ── Field builder ───────────────────────────────────────────── */}}
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span class="fw-semibold"><i class="bi bi-list-ul me-2 text-primary"></i>Felder
        <span class="badge bg-primary rounded-pill ms-1" id="field-count">0</span>
      </span>
      <button type="button" class="btn btn-primary btn-sm" id="btn-add-field">
        <i class="bi bi-plus-lg me-1"></i>Feld hinzufügen
      </button>
    </div>

    <div class="card-body p-3" id="field-list">
      {{/* Fields are injected here by JS */}}
      <div id="empty-hint" class="text-center text-muted py-4">
        <i class="bi bi-cursor-text d-block fs-2 mb-2"></i>
        Noch keine Felder — klicken Sie auf <strong>Feld hinzufügen</strong>.
      </div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button class="btn btn-primary px-4" type="submit" id="btn-submit">
      <i class="bi bi-floppy me-1"></i>Speichern
    </button>
    <a href="/" class="btn btn-outline-secondary"><i class="bi bi-x me-1"></i>Abbrechen</a>
  </div>
</form>

{{/* ── Hidden template for one field card (cloned by JS) ─────────── */}}
<template id="field-card-template">
  <div class="field-card border rounded-3 p-3 mb-3 bg-white position-relative">
    <div class="d-flex align-items-center gap-2 mb-3">
      <span class="field-num badge bg-secondary rounded-pill">1</span>
      <select name="field_type" class="form-select form-select-sm field-type-select type-select" aria-label="Feldtyp">
        <option value="text"     data-icon="bi-fonts"         data-has-options="0">Textfeld</option>
        <option value="textarea" data-icon="bi-textarea-t"    data-has-options="0">Textarea</option>
        <option value="select"   data-icon="bi-menu-button"   data-has-options="1">Auswahl (Select)</option>
        <option value="checkboxes" data-icon="bi-check2-square" data-has-options="1">Checkboxes</option>
        <option value="date"     data-icon="bi-calendar3"     data-has-options="0">Datum</option>
        <option value="number"   data-icon="bi-123"           data-has-options="0">Zahl</option>
        <option value="email"    data-icon="bi-envelope"      data-has-options="0">E-Mail</option>
        <option value="password" data-icon="bi-key"           data-has-options="0">Passwort</option>
      </select>
      <span class="field-type-icon text-primary fs-5"><i class="bi bi-fonts"></i></span>
      <button type="button" class="btn btn-outline-danger btn-sm ms-auto btn-remove-field" title="Feld entfernen">
        <i class="bi bi-trash3"></i>
      </button>
    </div>

    <div class="row g-3">
      <div class="col-sm-5">
        <label class="form-label small fw-semibold">Bezeichnung *</label>
        <input type="text" name="field_label" class="form-control form-control-sm field-label" placeholder="z.B. Vorname" required>
        <div class="invalid-feedback">Bezeichnung fehlt.</div>
      </div>
      <div class="col-sm-4 field-default-col">
        <label class="form-label small fw-semibold">Standardwert</label>
        <input type="text" name="field_default" class="form-control form-control-sm" placeholder="Optional">
      </div>
      <div class="col-sm-3 d-flex align-items-end pb-1">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" name="field_required" role="switch" id="req-__IDX__">
          <label class="form-check-label small" for="req-__IDX__">Pflichtfeld</label>
        </div>
      </div>
      <div class="col-12 field-options-row d-none">
        <label class="form-label small fw-semibold">
          Optionen <span class="text-muted fw-normal">— kommagetrennt</span>
        </label>
        <input type="text" name="field_options" class="form-control form-control-sm" placeholder="Option A, Option B, Option C">
        <div class="form-text text-muted">Jede Option ist gleichzeitig Wert und Bezeichnung.</div>
      </div>
    </div>
  </div>
</template>

{{template "footer" .}}
{{end}}