{% extends "base.html" %}
{% block title %}L{{ lektion.nummer }} — {{ lektion.titel }}{% endblock %}
{% block content %}
<div class="section-header">
    <h1><span style="color: var(--text-light);">L{{ lektion.nummer }}</span> {{ lektion.titel }}</h1>
    <a href="{{ url_for('oeffentlich.lektionen') }}" class="btn btn-secondary">← Alle Lektionen</a>
</div>

<div class="card">
    {% if lektion.onboarding %}<span class="badge badge-pflicht">Onboarding</span>{% endif %}
    <span class="badge badge-{{ lektion.schwierigkeit }}">{{ lektion.schwierigkeit }}</span>

    <div class="content" style="margin-top: 1rem;">{{ lektion.aufgabe_md|markdown }}</div>

    {% if lektion.tipp_md %}
    <details style="margin-top: 1rem;">
        <summary style="cursor:pointer; color: var(--primary);"><strong>💡 Tipp</strong></summary>
        <div class="content" style="margin-top: 0.5rem;">{{ lektion.tipp_md|markdown }}</div>
    </details>
    {% endif %}

    {% if lektion.extern_link %}
    <p style="margin-top: 1rem;">
        <a href="{{ lektion.extern_link }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
            Externer Link ↗
        </a>
    </p>
    {% endif %}
</div>

{# Wenn eingeloggt: Status-Buttons zum Selbst-Zertifizieren #}
{% if session.profil_id %}
<div class="card" style="background: var(--info-bg); border-left: 4px solid var(--primary);">
    <p style="margin: 0;"><strong>Status setzen</strong> (du entscheidest selbst, wann du fertig bist):</p>
    <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;">
        {% for opt, label in [('offen', '⚪ noch nicht angefangen'), ('laeuft', '🟡 läuft'), ('fertig', '✅ fertig')] %}
        <form method="post" action="{{ url_for('profil.lektion_status_setzen', nummer=lektion.nummer) }}">
            <button name="status" value="{{ opt }}" class="btn btn-secondary" style="font-size: 0.85rem;">{{ label }}</button>
        </form>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}