<!DOCTYPE html>
<html lang="{{ meta.language if meta else 'de-DE' }}">
<head>
<meta charset="UTF-8">
{% if meta %}
<title>{{ meta.title }}</title>
<meta name="author" content="{{ meta.author }}">
<meta name="description" content="{{ meta.subject }}">
<meta name="keywords" content="{{ meta.keywords_comma }}">
<meta name="subject" content="{{ meta.subject }}">
<meta name="generator" content="{{ meta.creator_app }}">
<meta name="dcterms.created" content="{{ meta.created_iso }}">
<meta name="dcterms.modified" content="{{ meta.modified_iso }}">
{% else %}
<title>{{ incident.title }}</title>
{% endif %}
<style>
@page { margin: 20mm 18mm 20mm 18mm; size: A4; @bottom-center { content: "Seite " counter(page) " von " counter(pages); font-size: 8pt; color: #0a1832; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 10.5pt; line-height: 1.55; color: #1a1a1a; }

/* Deckblatt */
.cover { page-break-after: always; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 85vh; text-align: center; }
.cover-logo { width: 80px; height: auto; margin-bottom: 30px; }
.cover-title { font-size: 26pt; font-weight: 700; color: #0a1832; margin-bottom: 8px; }
.cover-subtitle { font-size: 12pt; color: #666; margin-bottom: 40px; }
.cover-type { font-size: 10pt; color: #0a1832; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }
.cover-meta { font-size: 9pt; color: #0a1832; margin-top: 40px; }
.cover-meta div { margin-bottom: 3px; }
.cover-brand { font-size: 9pt; color: #0a1832; margin-top: 50px; letter-spacing: 1px; }

/* Inhaltsverzeichnis */
.toc { page-break-after: always; padding-top: 40px; }
.toc h2 { font-size: 16pt; font-weight: 700; color: #0a1832; border-bottom: 2px solid #c8a851; padding-bottom: 6px; margin-bottom: 24px; }
.toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc-counter; }
.toc-list li { padding: 10px 0; border-bottom: 1px solid #e0e0e0; counter-increment: toc-counter; }
.toc-list li::before { content: counter(toc-counter) "."; display: inline-block; width: 24px; font-weight: 600; color: #0a1832; }
.toc-list a { color: #0a1832; text-decoration: none; font-size: 11pt; }

/* Sections */
.section { page-break-before: always; margin-bottom: 20px; }
.section h2 { font-size: 14pt; font-weight: 700; color: #0a1832; border-bottom: 2px solid #c8a851; padding-bottom: 4px; margin-bottom: 12px; }
.section h3 { font-size: 11pt; font-weight: 600; color: #0a1832; margin: 14px 0 6px; }

/* Executive Summary */
.exec-summary { background: #f8f9fa; border-left: 4px solid #c8a851; padding: 16px 20px; margin-bottom: 20px; }
.exec-summary ul { margin: 8px 0 0 18px; }
.exec-summary li { margin-bottom: 6px; line-height: 1.6; }

/* Neueste Entwicklungen (Live-Monitoring) */
.dev-entry { margin-bottom: 12px; }
.dev-entry:last-child { margin-bottom: 0; }
.dev-entry-date { font-size: 9pt; font-weight: 600; color: #0a1832; margin-bottom: 2px; }
.dev-entry-body { font-size: 10.5pt; line-height: 1.5; }

/* Lagebild */
.lagebild-content { line-height: 1.7; }
.lagebild-content p { margin-bottom: 8px; }
.lagebild-content strong { font-weight: 600; }
.lagebild-content a { color: #1a5276; text-decoration: underline; }
.lagebild-content ul, .lagebild-content ol { margin: 6px 0 6px 20px; }
.lagebild-content li { margin-bottom: 3px; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 14px; }
.quellen-table { table-layout: fixed; font-size: 8pt; }
/* Ein Quelleneintrag darf nicht ueber die Seitengrenze zerfallen: sonst steht
   die Nummer am Fuss der einen und die Adresse am Kopf der naechsten Seite. */
tr { page-break-inside: avoid; }
th { background: #0a1832; color: #fff; text-align: left; padding: 6px 10px; font-weight: 600; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.5px; }
td { padding: 5px 10px; border-bottom: 1px solid #e0e0e0; }
tr:nth-child(even) { background: #f8f9fa; }

/* Faktencheck */
.fc-badge { display: inline-block; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 3px; }
.fc-confirmed { background: #d4edda; color: #155724; }
.fc-disputed { background: #f8d7da; color: #721c24; }
.fc-unconfirmed { background: #fff3cd; color: #856404; }

/* Timeline */
.tl-item { padding: 4px 0; border-left: 2px solid #c8a851; padding-left: 12px; margin-bottom: 6px; }
.tl-date { font-size: 8.5pt; color: #0a1832; }
.tl-title { font-size: 10pt; }
.tl-source { font-size: 8pt; color: #0a1832; }

/* Quellenverzeichnis */
.source-ref { font-size: 7pt; color: #666; word-break: break-all; max-width: 350px; overflow: hidden; text-overflow: ellipsis; }

/* Footer */
.report-footer { margin-top: 30px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 8pt; color: #0a1832; text-align: center; }
</style>
</head>
<body>
<!-- Deckblatt -->
<div class="cover">
    {% if include_branding %}<img src="data:image/svg+xml;base64,{{ logo_base64 }}" class="cover-logo" alt="AegisSight">{% endif %}
    <div class="cover-type">{{ incident_type_label }}</div>
    <div class="cover-title">{{ incident.title }}</div>
    <div class="cover-meta">
        <div>Stand: {{ report_date }}</div>
        <div>Erstellt von: {{ creator }}</div>
        {% if incident.organization_name %}<div>Organisation: {{ incident.organization_name }}</div>{% endif %}
    </div>
    {% if include_branding %}<div class="cover-brand">AegisSight Monitor</div>{% endif %}
</div>

<!-- Inhaltsverzeichnis -->
<div class="toc">
    <h2>Inhaltsverzeichnis</h2>
    <ul class="toc-list">
        {% if 'zusammenfassung' in sections %}<li><a href="#sec-zusammenfassung">{{ zusammenfassung_title }}</a></li>{% endif %}
        {% if 'bericht' in sections %}<li><a href="#sec-bericht">{% if incident.type == "research" %}Recherchebericht{% else %}Lagebild{% endif %}</a></li>{% endif %}
        {% if 'faktencheck' in sections and fact_checks %}<li><a href="#sec-faktencheck">Faktencheck</a></li>{% endif %}
        {% if 'quellen' in sections and sources %}<li><a href="#sec-quellen">Quellenverzeichnis</a></li>{% endif %}
        {% if 'timeline' in sections and timeline %}<li><a href="#sec-timeline">Ereignis-Timeline</a></li>{% endif %}
        {% if 'timeline' in sections and articles %}<li><a href="#sec-artikel">Artikelverzeichnis</a></li>{% endif %}
    </ul>
</div>

<!-- Zusammenfassung -->
{% if 'zusammenfassung' in sections %}
<div class="section" id="sec-zusammenfassung">
    <h2>{{ zusammenfassung_title }}</h2>
    <div class="exec-summary">
        {{ executive_summary | safe }}
    </div>
</div>
{% endif %}

<!-- Recherchebericht / Lagebild -->
{% if 'bericht' in sections %}
<div class="section" id="sec-bericht">
    <h2>{% if incident.type == "research" %}Recherchebericht{% else %}Lagebild{% endif %}</h2>
    {% if lagebild_timestamp %}<p style="font-size:9pt;color:#0a1832;margin-bottom:10px;">Aktualisiert: {{ lagebild_timestamp }}</p>{% endif %}
    <div class="lagebild-content">{{ lagebild_html | safe }}</div>
</div>
{% endif %}

<!-- Faktencheck -->
{% if 'faktencheck' in sections and fact_checks %}
<div class="section" id="sec-faktencheck">
    <h2>Faktencheck</h2>
    <table>
        <thead><tr><th>Behauptung</th><th>Status</th><th>Quellen</th></tr></thead>
        <tbody>
        {% for fc in fact_checks %}
        <tr>
            <td>{{ fc.claim or '' }}</td>
            <td><span class="fc-badge fc-{{ fc.status or 'unconfirmed' }}">{{ fc.status_label }}</span></td>
            <td>{{ fc.sources_count or 0 }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Quellenverzeichnis -->
{% if 'quellen' in sections and sources %}
<div class="section" id="sec-quellen">
    <h2>Quellenverzeichnis</h2>
    {% if source_stats %}
    <h3>Quellenstatistik</h3>
    <table>
        <thead><tr><th>Quelle</th><th>Belege</th><th>Sprache</th></tr></thead>
        <tbody>
        {% for stat in source_stats %}
        <tr><td>{{ stat.name }}</td><td>{{ stat.count }}</td><td>{{ stat.languages }}</td></tr>
        {% endfor %}
        </tbody>
    </table>
    {% if source_stats_note %}<p style="font-size:8pt;color:#666;margin-top:4px">{{ source_stats_note }}</p>{% endif %}
    {% endif %}
    <h3>Quellen</h3>
    <table class="quellen-table">
        <thead><tr><th style="width:30px">#</th><th style="width:120px">Quelle</th><th>URL</th></tr></thead>
        <tbody>
        {% for src in sources %}
        <tr><td style="font-size:8pt">{{ src.nr if src.nr is not none else loop.index }}</td><td style="font-size:8pt">{{ src.name or src.title or '' }}</td><td style="font-size:7pt;color:#666;word-break:break-all;line-height:1.3">{{ src.url or '' }}</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Timeline -->
{% if 'timeline' in sections and timeline %}
<div class="section" id="sec-timeline">
    <h2>Ereignis-Timeline</h2>
    {% for event in timeline %}
    <div class="tl-item">
        <div class="tl-date">{{ event.date }}</div>
        <div class="tl-title">{{ event.headline }}</div>
        <div class="tl-source">{{ event.source }}</div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Artikelverzeichnis -->
{% if 'timeline' in sections and articles %}
<div class="section" id="sec-artikel">
    <h2>Artikelverzeichnis ({{ articles | length }} Artikel)</h2>
    <table>
        <thead><tr><th>Headline</th><th>Quelle</th><th>Sprache</th><th>Datum</th></tr></thead>
        <tbody>
        {% for art in articles %}
        <tr>
            <td>{{ art.headline_de or art.headline or 'Ohne Titel' }}</td>
            <td>{{ art.source or '' }}</td>
            <td>{{ (art.language or 'de') | upper }}</td>
            <td>{{ art.pub_date }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<div class="report-footer">
    {% if include_branding %}Erstellt mit AegisSight Monitor &mdash; aegis-sight.de &mdash; {{ report_date }}{% else %}Stand: {{ report_date }}{% endif %}
</div>
</body>
</html>
