{% extends "base.html" %}
{% block title %}Tags verwalten{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Tags verwalten</h1>
</div>

<!-- Neue Kategorie -->
<div class="card">
    <div class="card-header"><h3>Neue Kategorie</h3></div>
    <form method="post" action="/tags/kategorie/neu" style="display: flex; gap: 0.75rem; align-items: end;">
        <div>
            <label for="kat_name">Name</label>
            <input type="text" id="kat_name" name="name" required style="margin: 0;">
        </div>
        <div>
            <label for="kat_farbe">Farbe</label>
            <input type="color" id="kat_farbe" name="farbe" value="#607D8B" style="margin: 0; height: 45px;">
        </div>
        <button type="submit" class="btn-sm" style="margin-bottom: 4px;">Hinzufügen</button>
    </form>
</div>

<!-- Kategorien + Tags -->
{% for kat in kategorien %}
<div class="card">
    <div class="card-header">
        <h3 style="display: flex; align-items: center; gap: 0.5rem;">
            <span style="width: 12px; height: 12px; border-radius: 50%; background: {{ kat.farbe }};"></span>
            {{ kat.name }}
        </h3>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
        {% for tag in kat.tags %}
        <span class="tag-chip" style="border-left: 3px solid {{ kat.farbe }};">
            {{ tag.name }}
            <span style="font-size: 0.65rem; color: var(--kw-text-muted);">({{ tag.kontakte|length }})</span>
        </span>
        {% endfor %}
    </div>
    <form method="post" action="/tags/neu" style="display: flex; gap: 0.5rem; align-items: end;">
        <input type="hidden" name="kategorie_id" value="{{ kat.id }}">
        <div style="flex: 1;">
            <input type="text" name="name" placeholder="Neuer Tag..." required style="margin: 0; font-size: 0.85rem;">
        </div>
        <button type="submit" class="btn-sm">+</button>
    </form>
</div>
{% endfor %}

{% if not kategorien %}
<div class="empty-state">
    <div class="empty-state-icon">🏷️</div>
    <p>Keine Tag-Kategorien vorhanden.</p>
</div>
{% endif %}
{% endblock %}
