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

{% if error %}
<div class="card p-3 mb-4 border border-red-700 text-red-400">
    Erreur Qualys : {{ error }}
</div>
{% endif %}

<div style="display:flex;gap:8px;margin-bottom:16px;">
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold text-cyber-accent">{{ stats.total }}</div><div class="text-xs text-gray-500">Total Qualys</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold" style="color:#2196F3">{{ stats.dyn }}</div><div class="text-xs text-gray-500">Dynamiques</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold" style="color:#FF9800">{{ stats.stat }}</div><div class="text-xs text-gray-500">Statiques</div></div>
</div>

<div class="card overflow-x-auto">
<table class="w-full table-cyber">
    <thead><tr>
        <th class="p-2 text-left">Nom</th>
        <th class="p-2">Type</th>
        <th class="p-2 text-left">Règle (QQL)</th>
        <th class="p-2">ID</th>
    </tr></thead>
    <tbody>
    {% for t in tags %}
    <tr>
        <td class="p-2 font-mono text-sm" style="color:{{ t.color or '#fff' }}">{{ 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-xs text-gray-400 font-mono">{{ t.rule_text or '-' }}</td>
        <td class="p-2 text-xs text-center text-gray-500">{{ t.id }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% endblock %}