{% extends 'base.html' %}
{% block title %}Tags V3 - Catalogue{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-bold text-cyber-accent">Catalogue nomenclature Qualys V3</h2>
    <div class="flex gap-2">
        <a href="/qualys/tagsv3" class="btn-sm bg-cyber-border text-cyber-accent">Vue Qualys</a>
        <a href="/qualys/tagsv3/gap" class="btn-sm bg-cyber-accent text-black">Gap vs V3</a>
        <a href="/qualys/tagsv3/catalog.json" class="btn-sm bg-cyber-green text-black">Export JSON</a>
    </div>
</div>

<div class="card p-3 mb-4">
    <p class="text-sm text-gray-400">Référence complète des tags Qualys SANEF V3 : nom, type, règle QQL, couleur. Les tags <span class="badge badge-blue">DYN</span> se créent dans la console Qualys (API non supportée). Les <span class="badge badge-yellow">STAT</span> se créent via la page Gap.</p>
</div>

{% for cat_code, cat in catalog.categories.items() %}
<div class="card p-4 mb-4">
    <h3 class="text-lg font-bold text-cyber-accent mb-2">{{ cat_code }}</h3>
    <p class="text-xs text-gray-400 mb-3">{{ cat.description }}</p>

    {% if cat.tags %}
    <table class="w-full table-cyber">
        <thead><tr>
            <th class="p-2" style="width:30px"></th>
            <th class="p-2 text-left">Tag</th>
            <th class="p-2">Type</th>
            <th class="p-2">Auto</th>
            <th class="p-2 text-left">QQL / Description</th>
            <th class="p-2">Couleur</th>
        </tr></thead>
        <tbody>
        {% for t in cat.tags %}
        <tr>
            <td class="p-2 text-center"><span style="display:inline-block;width:16px;height:16px;background:{{ t.color }};border-radius:3px"></span></td>
            <td class="p-2 font-mono text-sm" style="color:{{ t.color }};font-weight:bold">{{ t.name }}</td>
            <td class="p-2 text-center"><span class="badge {% if t.type == 'DYN' %}badge-blue{% else %}badge-yellow{% endif %}">{{ t.type }}</span></td>
            <td class="p-2 text-center">{% if t.auto %}<span class="text-cyber-green">✓</span>{% else %}<span class="text-cyber-red">✗</span>{% endif %}</td>
            <td class="p-2 font-mono text-xs text-cyber-accent" style="user-select:all">{{ t.qql or t.description or '-' }}</td>
            <td class="p-2 text-center"><span class="text-xs text-gray-400 font-mono">{{ t.color }}</span></td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if cat.prefixes %}
    <table class="w-full table-cyber">
        <thead><tr><th class="p-2 text-left">Préfixe</th><th class="p-2 text-left">Description</th></tr></thead>
        <tbody>
        {% for p in cat.prefixes %}
        <tr>
            <td class="p-2 font-mono text-cyber-accent">{{ p.prefix }}xxx</td>
            <td class="p-2 text-xs">{{ p.description }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>
{% endfor %}

{% endblock %}