{# Assistent "Workspace erstellen" (Workspace-Creator neu, Schritt D,
   07.10.2026; Einstieg vereinfachen Schritt 5, 25.10.2026: Distribution
   zuerst, danach nur, was es dort gibt, am Ende der Standort/Zweck). Ohne
   JavaScript ist das ein langes Formular mit allen Abschnitten und
   Distro-Kennzeichen an jedem Eintrag; der Server prüft beim Speichern
   ohnehin, dass jedes gewählte Merkmal auf der Distro umgesetzt ist.
   Gemeinsam für Admin und Kundenportal; erwartet zusätzlich
   assistent_ziel, ist_admin (nur der Admin wählt den Eigentümer) und
   standorte (nur Kundenportal, sonst None). #}
<style>
    .assistent details { margin-bottom: 0.4rem; }
    .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; }

    .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-karte { display: block; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem; cursor: pointer; }
    .distro-karte:has(input:checked) { border-color: var(--pico-primary-border); box-shadow: 0 0 0 1px var(--pico-primary-border); }
    .distro-karte.gesperrt { opacity: 0.6; cursor: not-allowed; }
    .distro-karte p { margin: 0.3rem 0 0 1.8rem; }
    .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; }
    form.js-aktiv .ohne-js { display: none; }
    form.js-aktiv li.anderswo { display: none; }
    form.js-aktiv details.leer { display: none; }
</style>

<h2>Workspace erstellen</h2>

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

<form method="post" action="{{ assistent_ziel }}" id="assistent" class="assistent"
      data-start-schritt="{{ 6 if fehler and werte.name and werte.backend_id else 1 }}">

<ol class="schritte nur-js">
    <li><button type="button" class="outline" data-gehe="1">1 Distribution</button></li>
    <li><button type="button" class="outline" data-gehe="2">2 Name{% if standorte is not none %} und Standort{% endif %}</button></li>
    <li><button type="button" class="outline" data-gehe="3">3 Apps</button></li>
    <li><button type="button" class="outline" data-gehe="4">4 Webapps</button></li>
    <li><button type="button" class="outline" data-gehe="5">5 Richtlinien</button></li>
    <li><button type="button" class="outline" data-gehe="6">6 Prüfen</button></li>
</ol>

<section data-schritt="1">
    <h3>1 · Distribution</h3>
    <p><small>Ein Workspace läuft auf genau einer Distribution. Danach siehst du nur Apps und Einstellungen, die es dort gibt.
    Geräte mit einer anderen Distribution müssten für diesen Workspace neu installiert werden.</small></p>
    {% for b in backends %}
    <label class="distro-karte{% if b.gesperrt %} gesperrt{% endif %}" data-distro="{{ b.key }}">
        <input type="radio" name="backend_id" value="{{ b.id }}" data-distro-key="{{ b.key }}" data-distro-name="{{ b.name }}"
               {% if werte.backend_id == b.id %}checked{% endif %} {% if b.gesperrt %}disabled{% endif %} required>
        <strong>{{ b.name }} {{ b.version }}</strong>
        {% if b.info %}<p><small>{{ b.info }}</small></p>{% endif %}
        {% if b.gesperrt %}<p><small><mark>{{ b.gesperrt }}</mark></small></p>
        {% elif b.eingerichtet == false %}<p><small>Installation für deine Organisation richtet tuxflotte auf Anfrage ein.</small></p>{% endif %}
    </label>
    {% endfor %}
</section>

<section data-schritt="2">
    <h3>2 · Name{% if standorte is not none %} und Standort/Zweck{% endif %}</h3>
    {% if standorte is not none %}
    {% set wahl = werte.standort if werte.standort is defined and werte.standort is not none else "neu" %}
    <fieldset>
        <legend>Für welchen Standort/Zweck ist der Workspace?</legend>
        <label>
            <input type="radio" name="standort" value="neu" {% if wahl == "neu" %}checked{% endif %}>
            Neuen Standort/Zweck anlegen
        </label>
        <div class="einrueckung" id="neuer-standort-feld">
            <input type="text" name="neuer_standort" id="neuer_standort" value="{{ werte.neuer_standort or '' }}" placeholder="z. B. Informatikraum" aria-label="Name des neuen Standorts/Zwecks">
        </div>
        <label>
            <input type="radio" name="standort" value="bestehend" {% if wahl not in ("neu", "") %}checked{% endif %}>
            Einem bestehenden zuweisen
        </label>
        <div class="einrueckung" id="bestehender-standort-feld">
            <select name="bestehender_standort" id="bestehender_standort" aria-label="Bestehender Standort/Zweck">
                {% for o in standorte %}
                <option value="{{ o.id }}" {% if wahl == o.id %}selected{% endif %}>{{ o.name }}{% if o.workspace %} (bisher: {{ o.workspace.name }}){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        <label>
            <input type="radio" name="standort" value="" {% if wahl == "" %}checked{% endif %}>
            Später entscheiden
        </label>
        <small>Alle Geräte dort bekommen diesen Workspace. Ändern kannst du das jederzeit unter Organisation › Standorte/Zwecke.</small>
    </fieldset>
    {% endif %}
    <label>Name des Workspace
        <input type="text" name="name" id="ws-name" value="{{ werte.name or '' }}" required placeholder="z. B. Informatikraum (Mint)">
    </label>
    <label>Zweck <small>(optional: wofür ist dieser Workspace gedacht?)</small>
        <input type="text" name="description" value="{{ werte.description or '' }}" placeholder="z. B. Unterricht Klassen 5–10 mit Programmierumgebung">
    </label>
    {% if ist_admin %}
    <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>
    {% endif %}
</section>

{% for bereich in bereiche %}
{% set schritt = {"apps": 3, "webapps": 4, "richtlinien": 5}[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 Distribution. Eigene, freie Webapps kannst du nach dem Speichern auf der Workspace-Seite ergänzen.</small></p>
    {% else %}
    <p class="nur-js" data-entfernt hidden><small><mark></mark></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 {% if bereich.key != "webapps" %}data-distros="{{ e.distro_keys | join(' ') }}"{% endif %}>
                <label>
                    <input type="checkbox" name="{{ feld }}" value="{{ e.id }}" data-name="{{ e.name }}" {% 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 class="ohne-js">
                    {% 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="6">
    <h3>6 · Prüfen und speichern</h3>
    <div id="zusammenfassung" class="nur-js"></div>
    <p><small>Der Workspace wird gleich veröffentlicht (Version 1). Ändern kannst du ihn danach auf seiner Seite.</small></p>
    <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 src="/static/workspace-assistent.js?v={{ static_version }}" defer></script>