{% extends "admin/layout.html" %}
{% block title %}Workspace erstellen — Tuxflotte Admin{% endblock %}
{% block admin_content %}
{% include "admin/_workspaces_nav.html" %}
{# Assistent "Workspace erstellen" (Workspace-Creator neu, Schritt D,
   07.10.2026). Ohne JavaScript ist das ein langes Formular mit allen
   Abschnitten; mit JavaScript ein Schritt-für-Schritt-Ablauf mit
   mitlaufender Distro-Leiste. Der Server prüft beim Speichern ohnehin, dass
   jedes gewählte Merkmal auf der gewählten Distro umgesetzt ist. #}
<style>
    .assistent details { margin-bottom: 0.4rem; }
    .assistent details details { margin-left: 1rem; }
    .assistent summary small { color: var(--pico-muted-color); }
    .assistent-liste { list-style: none; padding: 0; margin: 0 0 0 1rem; }
    .assistent-liste li { list-style: none; padding: 0.3rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
    .assistent-liste label { display: flex; gap: 0.6rem; align-items: center; margin: 0; }
    .assistent-liste input[type=checkbox] { flex: 0 0 auto; margin: 0; }
    .assistent-liste .text { flex: 1 1 auto; }
    .assistent-liste .text small { display: block; color: var(--pico-muted-color); }
    .assistent-icon { flex: 0 0 22px; width: 22px; height: 22px; font-size: 18px; line-height: 22px; text-align: center; }
    .distro-chip { font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 1rem; border: 1px solid var(--pico-primary-border); white-space: nowrap; }
    .distro-chip.fehlt { border-style: dashed; border-color: var(--pico-muted-border-color); color: var(--pico-muted-color); text-decoration: line-through; }
    .eintrag-konflikt { outline: 2px solid var(--pico-del-color); outline-offset: 2px; border-radius: 0.25rem; }

    .schritte { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1rem 0; }
    .schritte li { list-style: none; }
    .schritte button { padding: 0.2rem 0.7rem; font-size: 0.85rem; margin: 0; }
    .distro-leiste { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
                     padding: 0.5rem 0.75rem; margin-bottom: 1rem; border-radius: var(--pico-border-radius);
                     background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); }
    .distro-leiste .status { font-size: 0.85rem; padding: 0.1rem 0.6rem; border-radius: 1rem; border: 1px solid var(--pico-ins-color); cursor: pointer; background: none; color: inherit; margin: 0; width: auto; }
    .distro-leiste .status.konflikt { border-color: var(--pico-del-color); }
    .distro-karte { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
    .distro-karte.konflikt { border-color: var(--pico-del-color); }
    .distro-karte ul { margin: 0.5rem 0 0 0; }
    .distro-karte li { list-style: none; margin-bottom: 0.35rem; }
    .distro-karte button { padding: 0.1rem 0.5rem; font-size: 0.8rem; width: auto; display: inline-block; margin: 0.15rem 0.25rem 0 0; }
    .schritt-nav { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 1rem; }
    .schritt-nav button { width: auto; }

    form.js-aktiv section[data-schritt] { display: none; }
    form.js-aktiv section[data-schritt].aktiv { display: block; }
    form:not(.js-aktiv) .nur-js { display: none; }
</style>

<h2>Workspace erstellen</h2>

{% if fehler %}<p><mark>{{ fehler }}</mark></p>{% endif %}

<form method="post" action="/admin/workspaces/neu" id="assistent" class="assistent"
      data-start-schritt="{{ 5 if fehler and werte.name else 1 }}">

<ol class="schritte nur-js">
    <li><button type="button" class="outline" data-gehe="1">1 Name</button></li>
    <li><button type="button" class="outline" data-gehe="2">2 Apps</button></li>
    <li><button type="button" class="outline" data-gehe="3">3 Webapps</button></li>
    <li><button type="button" class="outline" data-gehe="4">4 Richtlinien</button></li>
    <li><button type="button" class="outline" data-gehe="5">5 Distro</button></li>
    <li><button type="button" class="outline" data-gehe="6">6 Prüfen</button></li>
</ol>

<div class="distro-leiste nur-js" id="distro-leiste" hidden>
    <small>Möglich mit:</small>
</div>

<section data-schritt="1">
    <h3>1 · Name und Zweck</h3>
    <label>Name
        <input type="text" name="name" value="{{ werte.name or '' }}" required placeholder="z. B. Computerraum Grundschule">
    </label>
    <label>Zweck <small>(wofür ist dieser Workspace gedacht?)</small>
        <input type="text" name="description" value="{{ werte.description or '' }}" placeholder="z. B. Unterricht Klassen 1–4 mit Lernspielen">
    </label>
    <label>Eigentümer
        <select name="organization_id">
            <option value="">tuxflotte (z. B. für Vorlagen)</option>
            {% for org in organisationen %}
            <option value="{{ org.id }}" {% if werte.organization_id == org.id %}selected{% endif %}>{{ org.name }}</option>
            {% endfor %}
        </select>
    </label>
</section>

{% for bereich in bereiche %}
{% set schritt = {"apps": 2, "webapps": 3, "richtlinien": 4}[bereich.key] %}
{% set feld = "webapp_template_ids" if bereich.key == "webapps" else "merkmal_ids" %}
{% set gewaehlt = werte[feld] %}
<section data-schritt="{{ schritt }}">
    <h3>{{ schritt }} · {{ bereich.symbol }} {{ bereich.name }}</h3>
    {% if bereich.key == "webapps" %}
    <p><small>Webapps laufen im Browser und damit auf jeder Distro. Eigene, freie Webapps kannst du nach dem Speichern auf der Workspace-Seite ergänzen.</small></p>
    {% endif %}
    {% if not bereich.kategorien %}<p><small>Noch keine Einträge im Katalog.</small></p>{% endif %}
    {% for kategorie in bereich.kategorien %}
    <details {% if kategorie.eintraege | selectattr("id", "in", gewaehlt) | list %}open{% endif %}>
        <summary>{{ kategorie.name }} <small data-zaehler>({{ kategorie.eintraege | length }})</small></summary>
        <ul class="assistent-liste">
        {% for e in kategorie.eintraege %}
            <li>
                <label data-eintrag="{{ e.id }}">
                    <input type="checkbox" name="{{ feld }}" value="{{ e.id }}" {% if e.id in gewaehlt %}checked{% endif %}>
                    {% if e.icon_url %}
                    <img class="assistent-icon" src="{{ e.icon_url }}" alt="" width="22" height="22" loading="lazy">
                    {% else %}
                    <span class="assistent-icon" aria-hidden="true">⚙️</span>
                    {% endif %}
                    <span class="text">{{ e.name }}{% if e.description %}<small>{{ e.description }}</small>{% endif %}</span>
                    {% if bereich.key != "webapps" %}
                    <span>
                    {% for d in e.distros %}
                        <span class="distro-chip{% if not d.verfuegbar %} fehlt{% endif %}" title="{{ d.name }}: {{ 'verfügbar' if d.verfuegbar else 'nicht verfügbar' }}">{{ d.name }}</span>
                    {% endfor %}
                    </span>
                    {% endif %}
                </label>
            </li>
        {% endfor %}
        </ul>
    </details>
    {% endfor %}
</section>
{% endfor %}

<section data-schritt="5">
    <h3>5 · Distro</h3>
    <p><small>Ein Workspace läuft auf genau einer Distro. Wählbar ist nur, was alle gewählten Apps und Richtlinien umsetzen kann.</small></p>
    <div id="distro-karten">
    {% for b in backends %}
        <label class="distro-karte" data-distro="{{ b.key }}">
            <input type="radio" name="backend_id" value="{{ b.id }}" {% if werte.backend_id == b.id %}checked{% endif %}>
            <strong>{{ b.name }} {{ b.version }}</strong>
            <span class="nur-js" data-distro-status></span>
            <ul class="nur-js" data-distro-probleme></ul>
        </label>
    {% endfor %}
    </div>
    <p class="nur-js" id="keine-distro" hidden><mark>Mit dieser Auswahl ist keine Distro möglich. Passe die rot markierten Einträge an – Vorschläge stehen bei der jeweiligen Distro.</mark></p>
</section>

<section data-schritt="6">
    <h3>6 · Prüfen und speichern</h3>
    <div id="zusammenfassung" class="nur-js"></div>
    <button type="submit" id="speichern">Workspace speichern</button>
</section>

<div class="schritt-nav nur-js">
    <button type="button" class="secondary outline" id="zurueck">← Zurück</button>
    <button type="button" id="weiter">Weiter →</button>
</div>
</form>

<script id="assistent-daten" type="application/json">{{ assistent_daten | safe }}</script>
<script src="/static/workspace-assistent.js?v={{ static_version }}" defer></script>
{% endblock %}