{% extends "admin/layout.html" %}
{% block title %}Katalog — Tuxflotte Admin{% endblock %}
{% block admin_content %}
{% include "admin/_workspaces_nav.html" %}
<style>
    .katalog details { margin-bottom: 0.5rem; }
    .katalog details details { margin-left: 1rem; }
    .katalog summary small { color: var(--pico-muted-color); }
    .katalog-liste { list-style: none; padding: 0; margin: 0 0 0 1rem; }
    .katalog-liste li { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; padding: 0.4rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none; }
    .katalog-icon { flex: 0 0 24px; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center; }
    .katalog-text { flex: 1 1 12rem; }
    .katalog-text small { display: block; color: var(--pico-muted-color); }
    .katalog-text code { font-size: 0.75rem; padding: 0 0.3rem; }
    .katalog-hinweis { font-size: 0.75rem; color: var(--pico-del-color); }
    .distro-chips { flex: 0 0 auto; display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
    .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; }
    .katalog .katalog-bearbeiten { flex: 0 0 auto; margin: 0; }
    .katalog .katalog-bearbeiten > summary { font-size: 0.8rem; padding: 0.15rem 0.6rem; margin: 0; }
    .katalog .katalog-bearbeiten[open] { flex-basis: 100%; }
    .katalog .katalog-bearbeiten form { max-width: 32rem; margin-top: 0.5rem; }
    .katalog-werkzeuge { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
    .katalog-werkzeuge > * { flex: 1 1 14rem; max-width: 22rem; margin-bottom: 0.5rem; }
</style>

<h2>Katalog</h2>
<p><small>Alles, was ein Workspace enthalten kann. Klappe einen Bereich und dann eine Kategorie auf. Die Kennzeichen rechts zeigen, auf welcher Distro ein Eintrag verfügbar ist (durchgestrichen = auf dieser Distro nicht umgesetzt; Mauszeiger drüber zeigt die Ansible-Rolle). Neue Distro-Umsetzungen brauchen Rollen-Code in ansible-content, nicht nur einen Datenbankeintrag.</small></p>

<div class="katalog-werkzeuge">
    <input type="search" id="katalog-suche" placeholder="Suche nach Name, Key, Beschreibung …" aria-label="Katalog durchsuchen">
    <select id="katalog-luecke" aria-label="Nach fehlender Distro filtern">
        <option value="">Alle Einträge</option>
        {% for d in backends %}
        <option value="{{ d.key }}">Fehlt auf {{ d.name }}{% if d.version %} {{ d.version }}{% endif %}</option>
        {% endfor %}
    </select>
</div>

<div class="katalog">
{% for bereich in bereiche %}
    <details>
        <summary><strong>{{ bereich.symbol }} {{ bereich.name }}</strong> <small>({{ bereich.anzahl }})</small></summary>
        {% if not bereich.kategorien %}
            <p><small>Noch keine Einträge.</small></p>
        {% endif %}
        {% for kategorie in bereich.kategorien %}
        <details>
            <summary>{{ kategorie.name }} <small>({{ kategorie.eintraege | length }})</small></summary>
            <ul class="katalog-liste">
            {% for e in kategorie.eintraege %}
                {% set p = e.pflege %}
                <li data-fehlt="{% for d in e.distros if not d.verfuegbar %}{{ d.key }} {% endfor %}">
                    {% if e.icon_url %}
                    <img class="katalog-icon" src="{{ e.icon_url }}" alt="" width="24" height="24" loading="lazy">
                    {% else %}
                    <span class="katalog-icon" aria-hidden="true">⚙️</span>
                    {% endif %}
                    <span class="katalog-text">
                        {{ e.name }}
                        {% if p.key %}<small><code>{{ p.key }}</code>{% if p.art == "merkmal" and not p.im_auftragskatalog %} <span class="katalog-hinweis">nicht im Auftragskatalog</span>{% endif %}</small>{% endif %}
                        {% if e.description %}<small>{{ e.description }}</small>{% endif %}
                    </span>
                    <span class="distro-chips">
                    {% for d in e.distros %}
                        <span class="distro-chip{% if not d.verfuegbar %} fehlt{% endif %}" title="{{ d.name }}{% if d.version %} {{ d.version }}{% endif %}: {% if d.verfuegbar %}verfügbar{% if d.rolle %} (Rolle {{ d.rolle }}){% endif %}{% else %}nicht verfügbar{% endif %}">{{ d.name }}</span>
                    {% endfor %}
                    </span>
                    {% if p.art == "merkmal" %}
                    <details class="katalog-bearbeiten">
                        <summary role="button" class="outline">Bearbeiten</summary>
                        <form method="post" action="/admin/workspaces/vorlagen/merkmale/{{ e.id }}">
                            <label>Name<input type="text" name="name" value="{{ e.name }}" required></label>
                            <label>Beschreibung<input type="text" name="description" value="{{ e.description or '' }}"></label>
                            <label>Kategorie
                                <select name="kategorie_id">
                                    <option value="">— keine —</option>
                                    {% for k in kategorien %}
                                    <option value="{{ k.id }}" {{ "selected" if k.id == p.kategorie_id else "" }}>{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <label>
                                <input type="checkbox" name="im_auftragskatalog" {{ "checked" if p.im_auftragskatalog else "" }}>
                                Im Auftragskatalog
                            </label>
                            <button type="submit">Speichern</button>
                        </form>
                    </details>
                    {% elif p.art == "webapp" %}
                    <details class="katalog-bearbeiten">
                        <summary role="button" class="outline">Bearbeiten</summary>
                        <form method="post" action="/admin/workspaces/vorlagen/webapp-vorlagen/{{ e.id }}">
                            <input type="hidden" name="zurueck" value="katalog">
                            <label>Name<input type="text" name="name" value="{{ e.name }}" required></label>
                            <label>URL<input type="url" name="url" value="{{ p.url or '' }}" required></label>
                            <label>Beschreibung<input type="text" name="description" value="{{ e.description or '' }}"></label>
                            <label>Kategorie
                                <select name="kategorie_id">
                                    <option value="">— ohne Kategorie —</option>
                                    {% for k in app_kategorien %}
                                    <option value="{{ k.id }}" {{ "selected" if k.id == p.kategorie_id else "" }}>{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <button type="submit">Speichern</button>
                        </form>
                    </details>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        </details>
        {% endfor %}
    </details>
{% endfor %}
</div>

<details>
<summary role="button" class="secondary outline">Neues Merkmal anlegen</summary>
<form method="post" action="/admin/workspaces/vorlagen/merkmale" style="max-width: 32rem">
    <label>Key<input type="text" name="key" required></label>
    <label>Name<input type="text" name="name" required></label>
    <label>Beschreibung<input type="text" name="description"></label>
    <button type="submit">Anlegen</button>
</form>
</details>
<p><small>Neue Webapps legst du unten unter <a href="#webapp-vorlagen">Webapp-Vorlagen</a> an.</small></p>


{# GUI-Runde 23.10.2026: früher eigene Unterseiten unter "Katalog". #}
<section>
    <details class="abschnitt" id="kategorien">
        <summary>Kategorien <small>{{ kategorien | length }}</small></summary>
        {% include "admin/_katalog_kategorien.html" %}
    </details>
    <details class="abschnitt" id="webapp-vorlagen">
        <summary>Webapp-Vorlagen <small>{{ webapp_templates | length }}</small></summary>
        {% include "admin/_katalog_webapp_vorlagen.html" %}
    </details>
</section>
<script src="/static/katalog-filter.js?v={{ static_version }}" defer></script>
{% endblock %}