{% extends "base.html" %}
{% block title %}Projekte — Admin{% endblock %}
{% block content %}

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Projekte</h1>
    <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary">&larr; Dashboard</a>
</div>

{# ============== Filter-Buttons ============== #}
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;">
    {% set filter_links = [
        ('alle', 'Alle', zaehler.alle),
        ('wartet', '⏳ wartet auf Freigabe', zaehler.wartet),
        ('rueckfrage', '❓ Rueckfrage', zaehler.rueckfrage),
        ('in_arbeit', '🔧 in Arbeit', zaehler.in_arbeit),
        ('abgeschlossen', '✅ abgeschlossen', zaehler.abgeschlossen),
    ] %}
    {% for key, label, anzahl in filter_links %}
    <a href="{{ url_for('admin.projekte_uebersicht', filter=key) }}"
       class="btn {% if aktueller_filter == key %}btn-primary{% else %}btn-secondary{% endif %}"
       style="font-size: 0.85rem;">
        {{ label }} <span style="opacity: 0.7;">({{ anzahl }})</span>
    </a>
    {% endfor %}
</div>

{% if projekte %}
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));">
    {% for p in projekte %}
    <a href="{{ url_for('admin.projekt_review', projekt_id=p.id) }}" class="card"
       style="text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.5rem;
              {% if p.freigabe_status == 'wartet_auf_freigabe' %}border-left: 4px solid var(--warning);
              {% elif p.freigabe_status == 'rueckfrage' %}border-left: 4px solid var(--danger);
              {% elif p.status_lebenszyklus == 'in_arbeit' %}border-left: 4px solid var(--primary);
              {% endif %}">
        {% if p.hat_cover %}
            <img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
                 style="width: 100%; height: 140px; object-fit: cover; border-radius: 6px;">
        {% else %}
            <div style="height: 140px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
                        display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-light);">
                🎯
            </div>
        {% endif %}

        <h3 style="margin: 0; color: var(--primary-dark);">{{ p.titel }}</h3>

        <div style="font-size: 0.85rem;">
            {{ tier_emoji(p.tier or '') }} <strong>{{ p.vorname or '—' }}</strong>
        </div>

        <div style="display: flex; gap: 0.3rem; flex-wrap: wrap; font-size: 0.8rem;">
            {% if p.status_lebenszyklus == 'in_arbeit' %}
                <span class="badge badge-mittel">🔧 in Arbeit</span>
            {% else %}
                <span class="badge badge-anfaenger">✅ abgeschlossen</span>
            {% endif %}

            {% if p.freigabe_status == 'wartet_auf_freigabe' %}
                <span class="badge badge-mittel">⏳ wartet</span>
            {% elif p.freigabe_status == 'rueckfrage' %}
                <span class="badge badge-fortgeschritten">❓ Rueckfrage</span>
            {% elif p.freigabe_status == 'freigegeben' %}
                <span class="badge badge-anfaenger">✓ frei</span>
            {% endif %}

            {% if p.selbsteinschaetzung == 'zufrieden' %}<span class="badge badge-anfaenger">🟢</span>
            {% elif p.selbsteinschaetzung == 'mittel' %}<span class="badge badge-mittel">🟡</span>
            {% elif p.selbsteinschaetzung == 'gelernt' %}<span class="badge badge-fortgeschritten">🔴</span>{% endif %}
        </div>

        <div style="font-size: 0.75rem; color: var(--text-light); margin-top: auto;">
            {% if p.abgeschlossen_am %}abgeschlossen {{ p.abgeschlossen_am[:10] }}
            {% else %}geaendert {{ p.geaendert_am[:10] }}{% endif %}
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="card">
    <p style="color: var(--text-light);">
        Keine Projekte
        {% if aktueller_filter != 'alle' %} mit Filter "{{ aktueller_filter }}"
            — <a href="{{ url_for('admin.projekte_uebersicht', filter='alle') }}">alle anzeigen</a>{% endif %}.
    </p>
</div>
{% endif %}

{% endblock %}