{% extends "base.html" %}
{% block title %}{{ aktivitaet.betreff or 'Aktivität' }}{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>
        {{ aktivitaet.art_icon }} {{ aktivitaet.betreff or 'Ohne Betreff' }}
        {% if aktivitaet.status == 'offen' %}
        <span class="tag-chip" style="background: #dd6b20; color: white; font-size: 0.8rem; vertical-align: middle;">offen</span>
        {% elif aktivitaet.status == 'information' %}
        <span class="tag-chip" style="background: #2196F3; color: white; font-size: 0.8rem; vertical-align: middle;">information</span>
        {% else %}
        <span class="tag-chip" style="background: #9E9E9E; color: white; font-size: 0.8rem; vertical-align: middle;">erledigt</span>
        {% endif %}
    </h1>
    <div class="btn-group">
        <a href="/aktivitaeten/{{ aktivitaet.id }}/bearbeiten" role="button" class="btn-sm">Bearbeiten</a>
        {% if aktivitaet.status == 'offen' %}
        <form method="post" action="/aktivitaeten/{{ aktivitaet.id }}/erledigt" style="display: inline;">
            <button type="submit" class="btn-sm" style="background: var(--kw-success); border-color: var(--kw-success);" onclick="if(!confirm('Aktivität wirklich als erledigt markieren?')) event.preventDefault()">Erledigt</button>
        </form>
        {% elif aktivitaet.status == 'erledigt' %}
        <form method="post" action="/aktivitaeten/{{ aktivitaet.id }}/erledigt" style="display: inline;">
            <button type="submit" class="btn-sm outline" onclick="if(!confirm('Aktivität wirklich wieder öffnen?')) event.preventDefault()">Wieder öffnen</button>
        </form>
        {% endif %}
        <button class="btn-sm btn-icon" onclick="if(confirm('Aktivität wirklich löschen?')) window.location='/aktivitaeten/{{ aktivitaet.id }}/loeschen'">🗑️</button>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-main">
        <div class="card">
            <div class="card-header"><h3>Details</h3></div>
            <div class="info-grid">
                <div class="info-label">Art</div>
                <div class="info-value">{{ aktivitaet.art_icon }} {{ aktivitaet.art_label }}</div>

                <div class="info-label">Kontakt</div>
                <div class="info-value">
                    {% if aktivitaet.kontakt %}
                    <a href="/kontakte/{{ aktivitaet.kontakt_id }}">{{ aktivitaet.kontakt.anzeigename }}</a>
                    {% else %}-{% endif %}
                </div>

                <div class="info-label">Datum</div>
                <div class="info-value">{{ aktivitaet.datum.strftime('%d.%m.%Y %H:%M') if aktivitaet.datum else '-' }}</div>

                <div class="info-label">Status</div>
                <div class="info-value">
                    {% if aktivitaet.status == 'offen' %}
                    <span class="tag-chip" style="background: #dd6b20; color: white;">Offen</span>
                    {% elif aktivitaet.status == 'information' %}
                    <span class="tag-chip" style="background: #2196F3; color: white;">Information</span>
                    {% else %}
                    <span style="color: var(--kw-text-muted);">Erledigt</span>
                    {% endif %}
                </div>

                {% if aktivitaet.faellig_am %}
                <div class="info-label">Fällig am</div>
                <div class="info-value" style="color: #dd6b20; font-weight: 500;">{{ aktivitaet.faellig_am.strftime('%d.%m.%Y %H:%M') }}</div>
                {% endif %}

                {% if aktivitaet.zugewiesen_an %}
                <div class="info-label">Zugewiesen an</div>
                <div class="info-value" style="color: var(--kw-primary);">{{ aktivitaet.zugewiesen_an }}{% if benutzer_map is defined and aktivitaet.zugewiesen_an in benutzer_map %} ({{ benutzer_map[aktivitaet.zugewiesen_an] }}){% endif %}</div>
                {% endif %}

                {% if aktivitaet.projekt %}
                <div class="info-label">Projekt</div>
                <div class="info-value"><span class="tag-chip">{{ aktivitaet.projekt }}</span></div>
                {% endif %}
            </div>
        </div>

        {% if aktivitaet.bemerkung %}
        <div class="card">
            <div class="card-header"><h3>Bemerkung</h3></div>
            <div style="font-size: 0.9rem; white-space: pre-wrap;">{{ aktivitaet.bemerkung }}</div>
        </div>
        {% endif %}

        {% if aktivitaet.dokumente %}
        <div class="card">
            <div class="card-header"><h3>Dokumente</h3></div>
            {% for dok in aktivitaet.dokumente %}
            <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0; border-bottom: 1px solid var(--kw-border); font-size: 0.85rem;">
                <span>📎</span>
                <a href="/dokumente/{{ dok.id }}/download" style="flex: 1;">{{ dok.dateiname }}</a>
                <span style="color: var(--kw-text-muted);">{{ (dok.dateigroesse / 1024)|round(0)|int }} KB</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <div class="detail-sidebar">
        <div class="card">
            <div class="card-header"><h3>Meta</h3></div>
            <div class="info-grid">
                <div class="info-label">Erfasst</div>
                <div class="info-value">{{ aktivitaet.erfasst_am.strftime('%d.%m.%Y') if aktivitaet.erfasst_am else '-' }}{% if aktivitaet.erfasst_von %} ({{ aktivitaet.erfasst_von }}){% endif %}</div>
                <div class="info-label">Aktualisiert</div>
                <div class="info-value">{{ aktivitaet.aktualisiert_am.strftime('%d.%m.%Y') if aktivitaet.aktualisiert_am else '-' }}{% if aktivitaet.aktualisiert_von %} ({{ aktivitaet.aktualisiert_von }}){% endif %}</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
