{% 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; 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 auto; }
    .katalog-text small { display: block; color: var(--pico-muted-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; }
</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). Nur Anzeige — bearbeitet wird unter „Vorlagen“.</small></p>

<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 %}
                <li>
                    {% 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 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 %}: {{ 'verfügbar' if d.verfuegbar else 'nicht verfügbar' }}">{{ d.name }}</span>
                    {% endfor %}
                    </span>
                </li>
            {% endfor %}
            </ul>
        </details>
        {% endfor %}
    </details>
{% endfor %}
</div>
{% endblock %}