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

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Meine Projekte</h1>
    <div>
        {% if darf_neues %}
        <a href="{{ url_for('profil.projekt_neu') }}" class="btn btn-primary">+ Neues Projekt</a>
        {% endif %}
        <a href="{{ url_for('profil.cockpit') }}" class="btn btn-secondary">Cockpit</a>
    </div>
</div>

{% if not darf_neues and sperr_grund %}
<div class="card" style="background:var(--warn-bg); border-left: 4px solid var(--warning);">
    {{ sperr_grund }}
</div>
{% endif %}

{% if projekte %}
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
    {% for p in projekte %}
    <a href="{{ url_for('profil.projekt_detail', projekt_id=p.id) }}" class="card"
       style="text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.6rem;">
        {% if p.hat_cover %}
            <img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
                 style="width: 100%; height: 160px; object-fit: cover; border-radius: 6px; background: #fff;">
        {% else %}
            <div style="height: 160px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
                        display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-light);">
                🎯
            </div>
        {% endif %}
        <h3 style="margin: 0; color: var(--primary-dark);">{{ p.titel }}</h3>
        <div style="font-size: 0.85rem;">
            {% if p.status_lebenszyklus == 'in_arbeit' %}
                <span class="badge badge-mittel">in Arbeit</span>
            {% else %}
                {% if p.selbsteinschaetzung == 'zufrieden' %}<span class="badge badge-anfaenger">🟢 zufrieden</span>
                {% elif p.selbsteinschaetzung == 'mittel' %}<span class="badge badge-mittel">🟡 mittel</span>
                {% elif p.selbsteinschaetzung == 'gelernt' %}<span class="badge badge-fortgeschritten">🔴 gelernt</span>
                {% endif %}
                {% if p.freigabe_status == 'wartet_auf_freigabe' %}<span class="badge badge-mittel">⏳ wartet auf Freigabe</span>
                {% elif p.freigabe_status == 'rueckfrage' %}<span class="badge badge-fortgeschritten">❓ Rueckfrage</span>
                {% endif %}
            {% endif %}
        </div>
        {% if p.abgeschlossen_am %}
        <div style="font-size: 0.8rem; color: var(--text-light);">
            abgeschlossen {{ p.abgeschlossen_am[:10] }}
        </div>
        {% endif %}
    </a>
    {% endfor %}
</div>
{% else %}
<div class="card">
    <p style="color: var(--text-light);">
        Du hast noch keine Projekte.
        {% if darf_neues %}<a href="{{ url_for('profil.projekt_neu') }}">Leg dein erstes an.</a>{% endif %}
    </p>
</div>
{% endif %}

{% endblock %}