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

{% block content %}
<div class="page-header">
    <h1>Aufräumen</h1>
    <p style="color: var(--kw-text-muted); font-size: 0.9rem; margin: 0;">
        Kontakte von oben nach unten durchgehen und auf Aktualität prüfen —
        älteste zuerst, nie aufgeräumte ganz oben.
    </p>
</div>

<!-- Legende -->
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;">
    <div style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--kw-text-muted);">
        <span style="width: 10px; height: 10px; border-radius: 50%; background: #e53e3e; display: inline-block;"></span> Nie aufgeräumt
    </div>
    <div style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--kw-text-muted);">
        <span style="width: 10px; height: 10px; border-radius: 50%; background: #FF9800; display: inline-block;"></span> Vor über 1 Jahr
    </div>
    <div style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--kw-text-muted);">
        <span style="width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; display: inline-block;"></span> Aufgeräumt
    </div>
    <span style="font-size: 0.8rem; color: var(--kw-text-muted); margin-left: auto;">{{ gesamt }} Kontakte gesamt</span>
</div>

<div class="card">
    <table class="data-table">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Typ</th>
                <th>Ort</th>
                <th>Betreuer</th>
                <th>Zuletzt aufgeräumt</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for k in kontakte %}
            {% set tage = ((heute - k.zuletzt_aufgeraeumt).days) if k.zuletzt_aufgeraeumt else None %}
            {% if k.zuletzt_aufgeraeumt is none %}
                {% set farbe = '#e53e3e' %}
            {% elif tage > 365 %}
                {% set farbe = '#FF9800' %}
            {% else %}
                {% set farbe = '#4CAF50' %}
            {% endif %}
            <tr id="aufr-{{ k.id }}">
                <td style="width: 12px; padding: 0 0 0 0.5rem;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: {{ farbe }}; display: inline-block;"></span>
                </td>
                <td style="font-weight: 500;">
                    <a href="/kontakte/{{ k.id }}">{{ k.anzeigename }}</a>
                </td>
                <td style="font-size: 0.8rem;">
                    {% if k.typ == 'person' %}
                    <span class="tag-chip" style="background: #E3F2FD; color: #1565C0;">Person</span>
                    {% else %}
                    <span class="tag-chip" style="background: #E8F5E9; color: #2E7D32;">Organisation</span>
                    {% endif %}
                </td>
                <td style="font-size: 0.85rem; color: var(--kw-text-muted);">{{ k.ort or '–' }}</td>
                <td style="font-size: 0.85rem; color: var(--kw-text-muted);">{{ k.betreuer or '–' }}</td>
                <td style="font-size: 0.85rem;">
                    {% if k.zuletzt_aufgeraeumt %}
                    <span style="color: {{ farbe }};">
                        {{ k.zuletzt_aufgeraeumt.strftime('%d.%m.%Y') }}
                        <span style="font-size: 0.75rem; color: var(--kw-text-muted);">(vor {{ tage }} Tagen)</span>
                    </span>
                    {% else %}
                    <span style="color: #e53e3e; font-weight: 600;">Nie</span>
                    {% endif %}
                </td>
                <td>
                    <button class="btn-sm"
                            style="background: var(--kw-success); color: white; border-color: var(--kw-success); white-space: nowrap;"
                            hx-post="/kontakte/{{ k.id }}/aufgeraeumt"
                            hx-target="#aufr-{{ k.id }}"
                            hx-swap="outerHTML">
                        ✓ Aufgeräumt
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if seiten_gesamt > 1 %}
<div style="display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap;">
    {% if seite > 1 %}
    <a href="/aufraemen?seite={{ seite - 1 }}" class="btn-sm outline">← Zurück</a>
    {% endif %}

    {% for s in range(1, seiten_gesamt + 1) %}
        {% if s == seite %}
        <span class="btn-sm contrast" style="min-width: 2.2rem; text-align: center;">{{ s }}</span>
        {% elif s == 1 or s == seiten_gesamt or (s >= seite - 2 and s <= seite + 2) %}
        <a href="/aufraemen?seite={{ s }}" class="btn-sm outline" style="min-width: 2.2rem; text-align: center;">{{ s }}</a>
        {% elif s == seite - 3 or s == seite + 3 %}
        <span style="color: var(--kw-text-muted); padding: 0 0.2rem;">…</span>
        {% endif %}
    {% endfor %}

    {% if seite < seiten_gesamt %}
    <a href="/aufraemen?seite={{ seite + 1 }}" class="btn-sm outline">Weiter →</a>
    {% endif %}
</div>
<p style="text-align: center; font-size: 0.8rem; color: var(--kw-text-muted); margin-top: 0.5rem;">
    Seite {{ seite }} von {{ seiten_gesamt }} · {{ gesamt }} Kontakte
</p>
{% endif %}

{% endblock %}
