{% extends "base.html" %}
{% block title %}Serienbrief-Vorschau – {{ veranstaltung.titel }}{% endblock %}

{% block content %}
<div class="container-fluid mt-3">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2>
      Serienbrief-Vorschau
      <small class="text-muted fs-6">{{ veranstaltung.titel }} ({{ veranstaltung.datum|date:"j. F Y" }})</small>
    </h2>
    <div class="d-flex gap-2">
      <a href="{% url 'stiftung:veranstaltung_serienbrief_pdf' veranstaltung.pk %}"
         class="btn btn-primary">
        PDF generieren
      </a>
      <a href="{% url 'stiftung:veranstaltung_detail' veranstaltung.pk %}"
         class="btn btn-outline-secondary">
        Zurück zur Veranstaltung
      </a>
    </div>
  </div>

  {% if not teilnehmer %}
  <div class="alert alert-warning">
    Diese Veranstaltung hat noch keine Teilnehmer. Bitte zuerst Teilnehmer anlegen.
  </div>
  {% else %}

  <div class="alert alert-info d-flex align-items-start gap-2 mb-3">
    <span>ℹ️</span>
    <div>
      <strong>{{ teilnehmer.count }} Brief{% if teilnehmer.count != 1 %}e{% endif %}</strong> werden generiert.
      Die Vorschau zeigt jeden Brief auf einer separaten Seite.
      Platzhalter wie <code>{% verbatim %}{{ vorname }}{% endverbatim %}</code> sind hier bereits durch Beispieldaten ersetzt.
    </div>
  </div>

  <!-- Navigation zwischen Briefen -->
  <div class="mb-3 d-flex gap-2 align-items-center flex-wrap">
    <strong>Empfänger:</strong>
    {% for t in teilnehmer %}
    <a href="#brief-{{ forloop.counter }}"
       class="btn btn-sm btn-outline-secondary">
      {{ t.nachname }}, {{ t.vorname }}
    </a>
    {% endfor %}
  </div>

  <!-- Einzelne Briefe -->
  {% for t in teilnehmer %}
  <div id="brief-{{ forloop.counter }}"
       style="max-width:210mm;margin:0 auto 40px;padding:20mm 25mm;border:1px solid #dee2e6;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);font-family:'Times New Roman',Times,serif;font-size:11pt;line-height:1.4;">

    <!-- Stiftungskopf -->
    <div style="font-size:12pt;font-weight:bold;margin-bottom:2mm;">van Hees-Theyssen-Vogel'sche Stiftung</div>
    <div style="font-size:8.5pt;color:#444;margin-bottom:5mm;">
      Raesfelder Str. 3 &nbsp;·&nbsp; 46499 Hamminkeln
    </div>

    <!-- Empfänger -->
    <div style="min-height:35mm;margin-bottom:5mm;">
      <div style="font-size:7.5pt;border-bottom:1px solid #000;margin-bottom:3pt;padding-bottom:1pt;color:#444;">
        van Hees-Theyssen-Vogel'sche Stiftung · Raesfelder Str. 3 · 46499 Hamminkeln
      </div>
      <p style="margin:0;line-height:1.3;">{{ t.anrede }} {{ t.vorname }} {{ t.nachname }}</p>
      {% if t.strasse %}<p style="margin:0;line-height:1.3;">{{ t.strasse }}</p>{% endif %}
      {% if t.plz or t.ort %}<p style="margin:0;line-height:1.3;">{{ t.plz }} {{ t.ort }}</p>{% endif %}
    </div>

    <!-- Datum -->
    <div style="text-align:right;margin-bottom:4mm;">
      Hamminkeln, den {{ veranstaltung.datum|date:"j. F Y" }}
    </div>

    <!-- Betreff -->
    <div style="font-weight:bold;margin-bottom:4mm;">
      {% if veranstaltung.betreff %}{{ veranstaltung.betreff }}{% else %}Einladung zum {{ veranstaltung.titel }}{% endif %}
    </div>

    <!-- Anrede -->
    <div style="margin-bottom:3mm;">
      Sehr geehrte{% if t.anrede == "Herr" %}r Herr{% elif t.anrede == "Frau" %} Frau{% else %}
      {{ t.anrede }}{% endif %} {{ t.nachname }},
    </div>

    <!-- Brieftext -->
    <div class="brieftext">
      {% if veranstaltung.briefvorlage %}
        {{ veranstaltung.briefvorlage|safe }}
      {% else %}
        <p>wir laden Sie herzlich ein, an der jährlichen Vorstellung der Rechnungslegung
        der van Hees-Theyssen-Vogel'schen Stiftung teilzunehmen.</p>
        <p>Die Veranstaltung findet statt am:</p>
        <div style="margin:4mm 0 4mm 10mm;font-weight:bold;">
          {{ veranstaltung.datum|date:"l, j. F Y" }}{% if veranstaltung.uhrzeit %}, {{ veranstaltung.uhrzeit|time:"H:i" }} Uhr{% endif %}<br>
          {{ veranstaltung.ort }}<br>
          {% if veranstaltung.adresse %}{{ veranstaltung.adresse }}{% endif %}
        </div>
        <p>Bitte teilen Sie uns Ihre Teilnahme bis zum <strong>4. April 2026</strong> mit.</p>
        <p>Wir freuen uns auf Ihr Kommen.</p>
      {% endif %}
      <p>Mit freundlichen Grüßen</p>
    </div>

    <!-- Unterschriften -->
    <div style="margin-top:10mm;">
      <div style="display:inline-block;width:45%;vertical-align:top;">
        {% if veranstaltung.unterschrift_1_name %}
        <div style="border-top:1px solid #000;margin-bottom:2mm;width:80%;"></div>
        {{ veranstaltung.unterschrift_1_name }}<br>
        {{ veranstaltung.unterschrift_1_titel }}<br>
        van Hees-Theyssen-Vogel'sche Stiftung
        {% endif %}
      </div>
      <div style="display:inline-block;width:45%;vertical-align:top;">
        {% if veranstaltung.unterschrift_2_name %}
        <div style="border-top:1px solid #000;margin-bottom:2mm;width:80%;"></div>
        {{ veranstaltung.unterschrift_2_name }}<br>
        {{ veranstaltung.unterschrift_2_titel }}<br>
        van Hees-Theyssen-Vogel'sche Stiftung
        {% endif %}
      </div>
    </div>

    <div style="text-align:right;margin-top:12mm;font-size:9pt;color:#999;">
      Brief {{ forloop.counter }} von {{ teilnehmer.count }}
    </div>
  </div>
  {% endfor %}

  {% endif %}
</div>
{% endblock %}