{% extends "base.html" %}
{% block title %}Newsletter{% endblock %}
{% block heading %}📧 Newsletter & Mailings{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Vertrieb / Newsletter</p>{% endblock %}

{% block content %}
{% if request.query_params.get('imported') %}
<div class="alert alert-success" style="background:rgba(16,185,129,0.1);color:#059669;padding:10px 14px;border-radius:6px;margin-bottom:14px;">
  ✓ {{ request.query_params.get('imported') }} Kunden importiert.
</div>
{% endif %}

<div class="grid grid-cols-2 gap-4">
  <!-- Subscribers -->
  <div class="card">
    <div class="card-header"><div>
      <h2>Abonnenten ({{ subscribers|length }})</h2>
      <p class="sub">Mailing-Liste</p>
    </div></div>
    <div class="p-4 border-b" style="border-color:var(--card-border-2);">
      <form method="post" action="/newsletter/subscriber/add" style="display:flex;gap:6px;">
        <input class="input flex-1" type="email" name="email" placeholder="email@beispiel.de" required>
        <input class="input" type="text" name="full_name" placeholder="Name" style="width:140px;">
        <input class="input" type="text" name="tags" placeholder="tags" style="width:100px;">
        <button class="btn btn-primary btn-sm" type="submit">+</button>
      </form>
      <form method="post" action="/newsletter/import-customers" style="margin-top:8px;">
        <button class="btn btn-secondary btn-sm" type="submit"
                onclick="return confirm('Alle Kunden mit E-Mail in die Newsletter-Liste übernehmen?')">
          📥 Aus Kunden-Stamm importieren
        </button>
      </form>
    </div>
    <table class="data-table">
      <thead><tr><th>E-Mail</th><th>Name</th><th>Tags</th><th>Seit</th></tr></thead>
      <tbody>
        {% for s in subscribers %}
        <tr>
          <td class="text-xs">{{ s.email }}</td>
          <td class="text-xs">{{ s.full_name or '—' }}</td>
          <td><span class="badge badge-neutral" style="font-size:10px;">{{ s.tags or '—' }}</span></td>
          <td class="text-xs nums">{{ s.subscribed_at[:10] }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4" style="text-align:center;padding:24px;color:var(--card-text-muted);">
          Noch keine Abonnenten.
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Campaigns -->
  <div class="card">
    <div class="card-header"><div>
      <h2>Kampagnen</h2>
      <p class="sub">Versendete + Entwürfe</p>
    </div></div>
    <form method="post" action="/newsletter/campaign/new" class="p-4 border-b" style="border-color:var(--card-border-2);">
      <div style="display:grid;grid-template-columns:1fr 140px;gap:6px;">
        <input class="input" type="text" name="subject" placeholder="Betreff …" required>
        <select name="kind" class="select">
          <option value="general">Allgemein</option>
          <option value="werks_urlaub">Werks-Urlaub</option>
          <option value="new_machine">Neue Maschine</option>
          <option value="special">Sondermaterial / Aktion</option>
        </select>
      </div>
      <input class="input mt-2 w-full" type="text" name="target_tags" placeholder="Filter-Tags (komma-separiert) — leer = alle">
      <textarea class="input mt-2 w-full" name="body" rows="6" placeholder="Nachricht …" required></textarea>
      <button class="btn btn-primary mt-2" type="submit">Kampagne anlegen (Entwurf)</button>
    </form>
    <table class="data-table">
      <thead><tr><th>Betreff</th><th>Typ</th><th>Status</th><th class="num">Empfänger</th><th>Erstellt</th></tr></thead>
      <tbody>
        {% for c in campaigns %}
        <tr>
          <td class="text-sm"><strong>{{ c.subject }}</strong></td>
          <td><span class="badge badge-neutral" style="font-size:10px;">{{ c.kind }}</span></td>
          <td><span class="badge badge-{% if c.status == 'sent' %}emerald{% else %}amber{% endif %}" style="font-size:10px;">{{ c.status }}</span></td>
          <td class="num nums">{{ c.sent_count or 0 }}</td>
          <td class="text-xs nums">{{ c.created_at[:10] }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="text-align:center;padding:24px;color:var(--card-text-muted);">Noch keine Kampagnen.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<p style="margin-top:14px;font-size:11px;color:var(--card-text-muted);">
  <strong>Hinweis:</strong> Versand-Funktion (SMTP-Bulk-Send) ist als
  <i>Entwurf → manuell freigeben</i> gestaltet — kein Auto-Versand. So
  bleiben Sie DSGVO-konform und können vor jedem Versand prüfen.
</p>
{% endblock %}