{% extends "base.html" %}
{% block title %}Dashboard{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Dashboard</h1>
</div>

<!-- KPI Grid -->
<div class="kpi-grid">
    <div class="kpi-card">
        <div class="kpi-value">{{ stats.personen }}</div>
        <div class="kpi-label">Personen</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ stats.organisationen }}</div>
        <div class="kpi-label">Organisationen</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ stats.aktivitaeten }}</div>
        <div class="kpi-label">Aktivitäten</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ stats.veranstaltungen }}</div>
        <div class="kpi-label">Veranstaltungen</div>
    </div>
</div>

<!-- Todos -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h3>
                    Todos
                    {% if wiedervorlagen %}
                    <span style="background: #dd6b20; color: white; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; margin-left: 0.3rem; vertical-align: middle;">{{ wiedervorlagen|length }}</span>
                    {% endif %}
                    <span style="font-size: 0.75rem; font-weight: 400; color: var(--kw-text-muted); margin-left: 0.3rem;">Unerledigte Aktivitäten</span>
                </h3>
        <div style="display: flex; gap: 0.3rem;">
            <a href="{{ url_todos_alle }}" class="btn-sm {% if not meine_todos %}contrast{% else %}outline{% endif %}">Alle</a>
            <a href="{{ url_todos_meine }}" class="btn-sm {% if meine_todos %}contrast{% else %}outline{% endif %}">Meine</a>
        </div>
    </div>
    {% if wiedervorlagen %}
    <div style="display: flex; flex-direction: column; gap: 0;">
        {% for wv in wiedervorlagen %}
        {% set tage_bis = (wv.faellig_am - heute).days if wv.faellig_am else 0 %}
        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--kw-border);">
            <span style="font-size: 0.8rem; min-width: 55px; font-weight: 600; color: {{ '#e53e3e' if tage_bis < 0 else '#dd6b20' if tage_bis <= 3 else 'var(--kw-text-muted)' }};">
                {% if tage_bis < 0 %}-{{ (-tage_bis) }} d{% elif tage_bis == 0 %}Heute{% elif tage_bis == 1 %}Morgen{% else %}+{{ tage_bis }} d{% endif %}
            </span>
            <span style="font-size: 0.85rem;">{{ wv.art_icon }}</span>
            <div style="flex: 1;">
                <a href="/aktivitaeten/{{ wv.id }}" style="font-size: 0.85rem; font-weight: 500; text-decoration: none; color: inherit;">{{ wv.betreff or 'Ohne Betreff' }}</a>
                {% if wv.kontakt %}<br><a href="/kontakte/{{ wv.kontakt_id }}" style="font-size: 0.8rem;">{{ wv.kontakt.anzeigename }}</a>{% endif %}
            </div>
            {% if wv.zugewiesen_an %}<span style="font-size: 0.75rem; color: var(--kw-primary);">→ {{ wv.zugewiesen_an }}</span>{% endif %}
            <span style="font-size: 0.75rem; color: var(--kw-text-muted);">{{ wv.faellig_am.strftime('%d.%m.') if wv.faellig_am else '' }}</span>
            <a href="/aktivitaeten/{{ wv.id }}/bearbeiten" style="font-size: 0.75rem;" title="Bearbeiten">✏️</a>
            <form method="post" action="/aktivitaeten/{{ wv.id }}/erledigt" style="display: inline;">
                <button type="submit" class="btn-icon" style="font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid var(--kw-success); color: var(--kw-success);" title="Erledigt">✓</button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">✅</div>
        <p>{% if meine_todos %}Keine offenen Todos für Sie.{% else %}Keine offenen Todos vorhanden.{% endif %}</p>
    </div>
    {% endif %}
</div>

<!-- Letzte Aktivitäten + Neuste Kontakte -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
    <div class="card">
        <div class="card-header">
            <h3>Letzte Aktivitäten</h3>
            <div style="display: flex; gap: 0.3rem;">
                <a href="{{ url_akt_alle }}" class="btn-sm {% if not meine_akt %}contrast{% else %}outline{% endif %}">Alle</a>
                <a href="{{ url_akt_meine }}" class="btn-sm {% if meine_akt %}contrast{% else %}outline{% endif %}">Meine</a>
            </div>
        </div>
        {% if letzte_aktivitaeten %}
        <div class="timeline">
            {% for akt in letzte_aktivitaeten %}
            <div class="timeline-item">
                <div class="timeline-date">{{ akt.datum.strftime('%d.%m.%Y') if akt.datum else '' }} &middot; <span class="timeline-art">{{ akt.art_icon }} {{ akt.art_label }}</span></div>
                <div class="timeline-content">
                    <a href="/aktivitaeten/{{ akt.id }}" style="text-decoration: none; color: inherit;"><strong>{{ akt.betreff or 'Ohne Betreff' }}</strong></a>
                    {% if akt.kontakt %}<br><a href="/kontakte/{{ akt.kontakt_id }}">{{ akt.kontakt.anzeigename }}</a>{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">📋</div>
            <p>{% if meine_akt %}Keine Aktivitäten für Sie vorhanden.{% else %}Keine Aktivitäten vorhanden.{% endif %}</p>
        </div>
        {% endif %}
    </div>

    <div class="card">
        <div class="card-header">
            <h3>Neueste Kontakte</h3>
            <div style="display: flex; gap: 0.3rem;">
                <a href="{{ url_kontakte_alle }}" class="btn-sm {% if not meine_kontakte %}contrast{% else %}outline{% endif %}">Alle</a>
                <a href="{{ url_kontakte_meine }}" class="btn-sm {% if meine_kontakte %}contrast{% else %}outline{% endif %}">Meine</a>
            </div>
        </div>
        {% if neuste_kontakte %}
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            {% for kontakt in neuste_kontakte %}
            {% include "components/kontakt_card.html" %}
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">👤</div>
            <p>{% if meine_kontakte %}Keine Kontakte für Sie vorhanden.{% else %}Keine Kontakte vorhanden.{% endif %}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
