{% extends "base.html" %}
{% block title %}Review: {{ p.titel }}{% endblock %}
{% block content %}

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

<div style="display: grid; grid-template-columns: 280px 1fr; gap: 1rem;">

    {# ============== Cover ============== #}
    <div class="card" style="text-align: center;">
        {% if p.hat_cover %}
            <img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
                 style="width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px;">
        {% else %}
            <div style="height: 200px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
                        display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-light);">
                🎯
            </div>
        {% endif %}
        {% if profil %}
        <div style="margin-top: 0.8rem;">
            <div style="font-size: 1.4rem;">{{ tier_emoji(profil.tier) }}</div>
            <strong>{{ profil.vorname }}</strong>
        </div>
        {% endif %}
        <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.4rem;">
            abgeschlossen {{ p.abgeschlossen_am[:16].replace('T', ' ') if p.abgeschlossen_am else '—' }}
        </div>
    </div>

    <div>
        {# ============== Beschreibung ============== #}
        <div class="card">
            <h2>Beschreibung</h2>
            {% if p.beschreibung_md %}
                <div>{{ p.beschreibung_md|markdown }}</div>
            {% else %}
                <p style="color: var(--text-light);"><em>Keine Beschreibung.</em></p>
            {% endif %}
        </div>

        {# ============== Selbstbewertung ============== #}
        <div class="card">
            <h2>Selbstbewertung</h2>
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem;">
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Gesamt</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung == 'zufrieden' %}🟢
                        {% elif p.selbsteinschaetzung == 'mittel' %}🟡
                        {% elif p.selbsteinschaetzung == 'gelernt' %}🔴{% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung or '—' }}</div>
                </div>
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Planung</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung_planung == 'gut' %}🟢
                        {% elif p.selbsteinschaetzung_planung == 'ok' %}🟡
                        {% elif p.selbsteinschaetzung_planung == 'schwierig' %}🔴
                        {% else %}—{% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_planung or '—' }}</div>
                </div>
                <div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
                    <div style="font-size: 0.75rem; color: var(--text-light);">Ausfuehrung</div>
                    <div style="font-size: 1.4rem; margin-top: 0.2rem;">
                        {% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢
                        {% elif p.selbsteinschaetzung_ausfuehrung == 'ok' %}🟡
                        {% elif p.selbsteinschaetzung_ausfuehrung == 'schwierig' %}🔴
                        {% else %}—{% endif %}
                    </div>
                    <div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_ausfuehrung or '—' }}</div>
                </div>
            </div>
            {% if p.was_gelernt %}
            <div style="margin-bottom: 0.6rem;">
                <strong>Was gelernt:</strong>
                <div style="margin-top: 0.2rem;">{{ p.was_gelernt }}</div>
            </div>
            {% endif %}
            {% if p.was_klappte_nicht %}
            <div>
                <strong>Was klappte nicht:</strong>
                <div style="margin-top: 0.2rem;">{{ p.was_klappte_nicht }}</div>
            </div>
            {% endif %}
        </div>

        {# ============== Rueckfragen-Historie ============== #}
        {% if rueckfragen %}
        <div class="card">
            <h2>Rueckfragen-Historie</h2>
            {% for r in rueckfragen %}
            <div style="border-left: 3px solid {% if r.status == 'offen' %}var(--warning){% else %}var(--success){% endif %};
                        padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; background: var(--surface-muted); border-radius: 4px;">
                <div style="font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
                    {{ r.erstellt_am[:16].replace('T', ' ') }}{% if r.status == 'erledigt' %} · ✓ erledigt{% endif %}
                </div>
                <div>{{ r.text }}</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {# ============== Aktionen ============== #}
        <div class="card" style="border-top: 4px solid var(--primary);">
            <h2>Deine Entscheidung</h2>

            <form method="post" action="{{ url_for('admin.projekt_freigeben', projekt_id=p.id) }}"
                  style="display: inline-block; margin-right: 0.5rem;">
                <button class="btn btn-primary" style="padding: 0.7rem 1.5rem;">
                    ✅ Freigeben — SuS darf neues anfangen
                </button>
            </form>

            <details style="margin-top: 1rem;">
                <summary style="cursor: pointer; color: var(--primary); font-weight: 600;">
                    ❓ Rueckfrage stellen
                </summary>
                <form method="post" action="{{ url_for('admin.projekt_rueckfrage', projekt_id=p.id) }}"
                      style="margin-top: 0.5rem; display: grid; gap: 0.5rem;">
                    <textarea name="text" required rows="3" maxlength="500"
                              placeholder="z.B. 'Schreib mir bitte 2-3 Saetze dazu, was beim Slicen schief lief.'"
                              style="padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit;"></textarea>
                    <div>
                        <button class="btn btn-secondary">Rueckfrage abschicken</button>
                    </div>
                </form>
            </details>

            <details style="margin-top: 1rem;">
                <summary style="cursor: pointer; color: var(--danger); font-weight: 600;">
                    🗑️ Hart loeschen
                </summary>
                <p style="font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem;">
                    Nur fuer Spam, Penismodelle, Copyright-Verletzungen. Wird im aenderung_log dokumentiert.
                </p>
                <form method="post" action="{{ url_for('admin.projekt_admin_loeschen', projekt_id=p.id) }}"
                      onsubmit="return confirm('Projekt {{ p.titel }} wirklich UNWIDERRUFLICH loeschen?')"
                      style="margin-top: 0.5rem;">
                    <button class="btn btn-secondary" style="color: var(--danger);">Endgueltig loeschen</button>
                </form>
            </details>
        </div>
    </div>
</div>

{% endblock %}