{% extends 'base.html' %}
{% block title %}Meine Umfragen · Einwandfrei{% endblock %}
{% block body %}
<h1 class="page-title">Meine Umfragen <span class="muted title-note">Live-Stand, aktualisiert alle 3 Sekunden</span></h1>

{% if not polls %}
<div class="card empty-state">
  <p class="muted">Du hast noch keine Abstimmungen erstellt.</p>
  <a href="{{ url_for('erstellen') }}" class="btn btn-primary">Jetzt erstellen</a>
</div>
{% endif %}

<div id="polls-container">
{% for p in polls %}
<div class="card poll-card" data-poll-id="{{ p.id }}">
  <div class="poll-head">
    <h2>{{ p.title }}</h2>
    <span class="badge {{ 'badge-closed' if p.closed else 'badge-open' }}">{{ 'Geschlossen' if p.closed else 'Offen' }}</span>
  </div>
  {% if p.description %}<p class="muted">{{ p.description }}</p>{% endif %}
  <p class="poll-meta">Erstellt am {{ p.created_at }}{% if p.closed %} · Geschlossen am {{ p.closed_at }}{% endif %} · <span class="live-total">{{ p.total }}</span> Stimme(n)</p>
  <div class="results" data-results="{{ p.id }}">
  {% for o in p.options %}
  <div class="result-row">
    <div class="result-label">
      <span>{{ o.text }}</span>
      <span class="result-count" data-opt="{{ o.id }}">{{ o.count }} · {{ ((o.count / p.total * 100) | round(1)) if p.total else 0 }}%</span>
    </div>
    <div class="result-bar-bg">
      <div class="result-bar" data-bar="{{ o.id }}" style="width: {{ (o.count / p.total * 100) if p.total else 0 }}%"></div>
    </div>
  </div>
  {% endfor %}
  </div>
  <div class="btn-row">
    {% if not p.closed %}
    <form method="post" action="{{ url_for('close_poll', poll_id=p.id) }}" onsubmit="return confirm('Abstimmung wirklich schließen? Die Ergebnisse werden danach 24h für alle angezeigt.');">
      <button type="submit" class="btn btn-warn">Abstimmung schließen</button>
    </form>
    {% endif %}
    <form method="post" action="{{ url_for('delete_poll', poll_id=p.id) }}" onsubmit="return confirm('Abstimmung inkl. aller Ergebnisse UNWIDERRUFLICH löschen?');">
      <button type="submit" class="btn btn-danger">Löschen</button>
    </form>
  </div>
</div>
{% endfor %}
</div>

<script>
function renderPoll(p) {
  let opts = p.options.map(o => {
    const pct = p.total ? (o.count / p.total * 100) : 0;
    return `<div class="result-row">
      <div class="result-label"><span>${escapeHtml(o.text)}</span>
      <span class="result-count">${o.count} · ${pct.toFixed(1)}%</span></div>
      <div class="result-bar-bg"><div class="result-bar" style="width:${pct}%"></div></div>
    </div>`;
  }).join('');
  return opts;
}
function escapeHtml(s) {
  const d = document.createElement('div');
  d.textContent = s;
  return d.innerHTML;
}
async function refresh() {
  try {
    const res = await fetch('/api/meine');
    if (!res.ok) return;
    const polls = await res.json();
    polls.forEach(p => {
      const card = document.querySelector(`[data-poll-id="${p.id}"]`);
      if (!card) return;
      const container = card.querySelector('[data-results]');
      if (container) container.innerHTML = renderPoll(p);
      const total = card.querySelector('.live-total');
      if (total) total.textContent = p.total;
    });
  } catch (e) { /* still */ }
}
setInterval(refresh, 3000);
</script>
{% endblock %}