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

<style>
    .druckerkachel-gross {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.2rem;
    }
    .druckerkachel-gross h2 { margin: 0; color: var(--primary-dark); }
    .druckerkachel-gross .modell { font-size: 0.85rem; color: var(--text-light); }
    .druckerkachel-gross .status-zeile { font-size: 1rem; font-weight: 600; margin-top: 0.3rem; }
    .druckerkachel-gross .progress {
        font-size: 0.85rem; color: var(--text-light); margin-top: 0.2rem;
    }
    .druckerkachel-gross .sperre-banner {
        background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border);
        border-radius: 6px; padding: 0.6rem 0.8rem; font-size: 0.9rem;
    }
    .druckerkachel-gross .api-hinweis {
        font-size: 0.8rem; color: var(--text-light); font-style: italic;
    }
    .druckerkachel-gross .links {
        display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem;
    }
    .druckerkachel-gross .links .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
    .druckerkachel-gross.gesperrt { border-left: 4px solid var(--danger); }
</style>

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Drucker</h1>
    <a href="{{ url_for('profil.slots') }}" class="btn btn-secondary">Meine Reservierungen</a>
</div>
<p style="color: var(--text-light);">
    Aktueller Stand unserer 4 Bambu-Lab-Drucker. <strong>Kein Drucken ohne Reservierung</strong> — es
    muss immer klar sein, wer gerade an welchem Drucker druckt.
</p>

{% if not darf_reservieren %}
<div class="card" style="background:var(--warn-bg); border-left: 4px solid var(--warning);">
    <strong>Reservierung noch nicht freigeschaltet.</strong>
    Du kannst die Drucker bisher nur ansehen. Lass dich beim Lehrer freischalten,
    dann kannst du selbst Slots reservieren.
</div>
{% endif %}

{% set gesperrte = drucker_liste | selectattr('freigegeben', 'equalto', 0) | list %}
{% if gesperrte %}
<div class="card" style="background:var(--error-bg); border-left: 4px solid var(--danger);">
    <strong>⚠ {{ gesperrte|length }} Drucker derzeit gesperrt:</strong>
    {{ gesperrte | map(attribute='name') | join(', ') }}
    — Details auf den jeweiligen Kacheln.
</div>
{% endif %}

<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
    {% for d in drucker_liste %}
    <div class="card druckerkachel-gross drucker-{{ d.status or 'idle' }} {% if not d.freigegeben %}gesperrt{% endif %}">
        <div>
            <h2>{{ d.name }}</h2>
            <div class="modell">
                {{ d.modell }}{% if not d.geschlossenes_gehaeuse %} · <span style="color: var(--danger);">offen</span>{% endif %}
            </div>
        </div>

        {# Sperre-Banner hat Vorrang vor allem anderen #}
        {% if not d.freigegeben %}
        <div class="sperre-banner">
            <strong>Gesperrt</strong>{% if d.gesperrt_grund %} — {{ d.gesperrt_grund }}{% endif %}
            <div style="font-size: 0.8rem; margin-top: 0.3rem;">Reservierung derzeit nicht moeglich.</div>
        </div>
        {% endif %}

        {# Status-Zeile #}
        <div class="status-zeile">
            {% if d.status == 'printing' %}🟢 druckt
            {% elif d.status == 'idle' %}⚪ frei
            {% elif d.status == 'paused' %}🟡 pausiert
            {% elif d.status == 'finished' %}✅ fertig — Druck abholen
            {% elif d.status == 'failed' %}🔴 Fehler
            {% elif d.status == 'offline' %}⚫ offline
            {% else %}⚪ kein Status
            {% endif %}
        </div>

        {# Job-Details wenn aktiv #}
        {% if d.job_name %}<div class="progress">{{ d.job_name }}</div>{% endif %}
        {% if d.progress_pct %}
        <div class="progress">
            {{ d.progress_pct|round|int }} %{% if d.restzeit_min %} · noch {{ d.restzeit_min }} min{% endif %}
        </div>
        {% endif %}
        {% if d.fehlermeldung %}
        <div style="color: var(--danger); font-size: 0.9rem;">{{ d.fehlermeldung }}</div>
        {% endif %}

        {# Notiz vom Lehrer (auch wenn nicht gesperrt) #}
        {% if d.notiz and d.freigegeben %}
        <div style="font-size: 0.85rem; color: var(--text-light);">ℹ️ {{ d.notiz }}</div>
        {% endif %}

        {# Hinweis wenn noch keine API-Daten #}
        {% if not d.status %}
        <div class="api-hinweis">
            (Live-Status via Bambu-API kommt mit Etappe 5. Bis dahin pflegt der Lehrer den Status manuell.)
        </div>
        {% elif d.manuell_gesetzt %}
        <div class="api-hinweis">vom Lehrer gesetzt</div>
        {% endif %}

        {# Belegung: aktuell + naechste 3 Slots #}
        <div style="background:var(--surface-muted); border-radius: 6px; padding: 0.6rem 0.8rem; font-size: 0.85rem;">
            {% if d.belegung %}
            <div><strong>🔖 Jetzt belegt:</strong>
                {{ tier_emoji(d.belegung.tier or '') }} {{ d.belegung.vorname or '—' }}
                bis {{ d.belegung.ende_zeit|iso_format('%H:%M') }} Uhr
            </div>
            {% else %}
            <div><strong>🔖 Aktuell frei.</strong></div>
            {% endif %}
            {% if d.kommend %}
            <div style="margin-top: 0.3rem; color: var(--text-light);">
                Naechste:
                {% for s in d.kommend %}
                    {{ s.start_zeit|iso_format('%d.%m. %H:%M') }}–{{ s.ende_zeit|iso_format('%H:%M') }}
                    ({{ s.vorname or '—' }}){% if not loop.last %}, {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>

        {# Reservieren-Button #}
        {% if d.freigegeben and darf_reservieren %}
        <a href="{{ url_for('profil.slot_neu', drucker_id=d.id) }}" class="btn btn-primary"
           style="text-align: center;">+ Diesen Drucker reservieren</a>
        {% elif d.freigegeben and not darf_reservieren %}
        <div style="font-size: 0.8rem; color: var(--text-light); font-style: italic;">
            Reservierung ist fuer dich noch nicht freigeschaltet.
        </div>
        {% endif %}

        {# Manual + Troubleshooting #}
        <div class="links">
            {% if d.manual %}
            <a href="{{ d.manual }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">📖 Manual ↗</a>
            {% endif %}
            {% if d.troubleshooting %}
            <a href="{{ d.troubleshooting }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">🔧 Hilfe ↗</a>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% if not drucker_liste %}
<div class="card">
    <p style="color: var(--text-light);">Noch keine Drucker eingerichtet.</p>
</div>
{% endif %}

{% endblock %}