{% extends 'base.html' %}
{% block title %}Umfrage erstellen · Einwandfrei{% endblock %}
{% block body %}
<h1 class="page-title">Neue Abstimmung erstellen</h1>
<div class="card">
  <form method="post" id="poll-form">
    <label>Beschreibung / Fragestellung</label>
    <textarea name="title" rows="3" required maxlength="1000" placeholder="z.B. Soll das Sommerfest dieses Jahr am Freitag, 12.06., stattfinden?"></textarea>
    <label>Antwortoptionen (2–20 · vorausgefüllt Ja / Nein / Enthaltung, frei anpassbar)</label>
    <div id="options-list">
      <div class="option-edit"><input type="text" name="options" required maxlength="500" value="Ja"><button type="button" class="opt-remove" title="Option entfernen">✕</button></div>
      <div class="option-edit"><input type="text" name="options" required maxlength="500" value="Nein"><button type="button" class="opt-remove" title="Option entfernen">✕</button></div>
      <div class="option-edit"><input type="text" name="options" required maxlength="500" value="Enthaltung"><button type="button" class="opt-remove" title="Option entfernen">✕</button></div>
    </div>
    <div class="btn-row">
      <button type="button" class="btn btn-ghost" id="add-option">+ Option hinzufügen</button>
    </div>
    <button type="submit" class="btn btn-primary btn-block">Abstimmung veröffentlichen</button>
    <p class="muted small">Hinweis: Abstimmungen werden spätestens 7 Tage nach Erstellung automatisch gelöscht.</p>
  </form>
</div>

<h1 class="page-title section-gap">Aktuell abstimmungsberechtigt</h1>
<div class="card">
  {% if whitelist %}
  <p class="muted">Nur die folgenden E-Mail-Adressen dürfen aktuell abstimmen. Alle anderen sehen Abstimmungen, können aber nicht teilnehmen. Jeder eingeloggte Nutzer kann diese Liste bearbeiten.</p>
  <ul class="whitelist">
    {% for e in whitelist %}
    <li>
      <span>{{ e }}</span>
      <form method="post" action="{{ url_for('whitelist_remove') }}" onsubmit="return confirm('{{ e }} wirklich aus der Berechtigten-Liste entfernen?');">
        <input type="hidden" name="email" value="{{ e }}">
        <button type="submit" class="btn btn-danger btn-small">Entfernen</button>
      </form>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="muted">Die Liste ist leer – aktuell darf <strong>niemand</strong> abstimmen. Trage hier die E-Mail-Adressen ein, die abstimmen dürfen (inkl. deiner eigenen, wenn du selbst abstimmen willst).</p>
  {% endif %}
  <form method="post" action="{{ url_for('whitelist_add') }}" class="whitelist-add">
    <label>E-Mail-Adresse(n) hinzufügen</label>
    <textarea name="emails" rows="3" placeholder="eine@charite.de, zwei@charite.de&#10;oder eine pro Zeile"></textarea>
    <button type="submit" class="btn btn-primary">Zur Liste hinzufügen</button>
  </form>
</div>

<script>
const list = document.getElementById('options-list');
function makeRow(value) {
  const div = document.createElement('div');
  div.className = 'option-edit';
  const input = document.createElement('input');
  input.type = 'text';
  input.name = 'options';
  input.maxLength = 500;
  input.value = value || '';
  input.placeholder = 'Option ' + (list.children.length + 1);
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'opt-remove';
  btn.title = 'Option entfernen';
  btn.textContent = '✕';
  div.appendChild(input);
  div.appendChild(btn);
  return div;
}
document.getElementById('add-option').addEventListener('click', function () {
  if (list.children.length >= 20) return;
  const row = makeRow('');
  list.appendChild(row);
  row.querySelector('input').focus();
});
list.addEventListener('click', function (e) {
  if (!e.target.classList.contains('opt-remove')) return;
  if (list.children.length <= 2) { alert('Mindestens 2 Antwortoptionen sind nötig.'); return; }
  e.target.parentElement.remove();
});
</script>
{% endblock %}