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

<style>
    .eval-gruppe { display: grid; gap: 0.5rem; }
    .eval-titel { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
    .eval-untertitel { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.6rem; font-weight: normal; }
    .eval-optionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .eval-option {
        cursor: pointer; padding: 0.7rem 0.5rem; border-radius: 6px; text-align: center;
        background: var(--surface-muted); border: 2px solid transparent; transition: all 0.15s;
    }
    .eval-option:hover { background: var(--surface-muted); }
    .eval-option input[type=radio] { display: none; }
    .eval-option input[type=radio]:checked + span { font-weight: 600; }
    .eval-option:has(input[type=radio]:checked) {
        background: var(--info-bg); border-color: var(--primary);
    }
    .eval-emoji { font-size: 1.4rem; display: block; margin-bottom: 0.2rem; }
</style>

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>"{{ p.titel }}" abschliessen</h1>
    <a href="{{ url_for('profil.projekt_detail', projekt_id=p.id) }}" class="btn btn-secondary">Abbrechen</a>
</div>

<div class="card" style="background:var(--info-bg); border-left: 4px solid var(--primary);">
    <strong>Ehrlich bleiben.</strong> Niemand wird benotet — die Bewertung ist fuer dich selbst,
    damit du beim naechsten Projekt besser einschaetzen kannst, was du planen musst.
</div>

<div class="card">
    <form method="post" style="display: grid; gap: 1.5rem;">

        {# ============== Gesamt ============== #}
        <div class="eval-gruppe">
            <div class="eval-titel">Wie ist es insgesamt gelaufen? *</div>
            <div class="eval-untertitel">
                "Gelernt" heisst: hat nicht so geklappt, aber ich hab dabei was verstanden.
                Bei "Gelernt" schaut der Lehrer kurz drueber, bevor du was Neues anfaengst.
            </div>
            <div class="eval-optionen">
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung" value="zufrieden" required>
                    <span><span class="eval-emoji">🟢</span>Zufrieden</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung" value="mittel">
                    <span><span class="eval-emoji">🟡</span>Mittel</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung" value="gelernt">
                    <span><span class="eval-emoji">🔴</span>Gelernt</span>
                </label>
            </div>
        </div>

        {# ============== Planung ============== #}
        <div class="eval-gruppe">
            <div class="eval-titel">Wie gut war deine Planung im Vorhinein?</div>
            <div class="eval-untertitel">Hattest du vorher klar, was du bauen willst und wie?</div>
            <div class="eval-optionen">
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_planung" value="gut">
                    <span><span class="eval-emoji">🟢</span>Gut</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_planung" value="ok">
                    <span><span class="eval-emoji">🟡</span>OK</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_planung" value="schwierig">
                    <span><span class="eval-emoji">🔴</span>Schwierig</span>
                </label>
            </div>
        </div>

        {# ============== Ausfuehrung ============== #}
        <div class="eval-gruppe">
            <div class="eval-titel">Wie gut hat die Ausfuehrung geklappt?</div>
            <div class="eval-untertitel">Modellieren, Slicen, Drucken — wie ist das gelaufen?</div>
            <div class="eval-optionen">
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_ausfuehrung" value="gut">
                    <span><span class="eval-emoji">🟢</span>Gut</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_ausfuehrung" value="ok">
                    <span><span class="eval-emoji">🟡</span>OK</span>
                </label>
                <label class="eval-option">
                    <input type="radio" name="selbsteinschaetzung_ausfuehrung" value="schwierig">
                    <span><span class="eval-emoji">🔴</span>Schwierig</span>
                </label>
            </div>
        </div>

        {# ============== Freitexte ============== #}
        <div>
            <label style="display:block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem;">
                Was hast du gelernt?
            </label>
            <div style="font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.4rem;">
                1-2 Saetze reichen. Was nimmst du mit fuer's naechste Mal?
            </div>
            <textarea name="was_gelernt" rows="3" maxlength="500"
                      style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; font-family: inherit;"></textarea>
        </div>

        <div>
            <label style="display:block; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem;">
                Was hat nicht so geklappt? <span style="font-weight: normal; color: var(--text-light);">(optional)</span>
            </label>
            <div style="font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.4rem;">
                Nur wenn was schief lief. Hilft dem Lehrer beim Drueberschauen.
            </div>
            <textarea name="was_klappte_nicht" rows="3" maxlength="500"
                      style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; font-family: inherit;"></textarea>
        </div>

        <div style="display: flex; justify-content: space-between;">
            <a href="{{ url_for('profil.projekt_detail', projekt_id=p.id) }}" class="btn btn-secondary">Abbrechen</a>
            <button class="btn btn-primary">Projekt abschliessen</button>
        </div>
    </form>
</div>

{% endblock %}