{% extends 'base.html' %}
{% block title %}Tags V3 - Gap analysis{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-bold text-cyber-accent">Gap nomenclature V3 ↔ Qualys</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" class="btn-sm bg-cyber-border text-cyber-accent">← Vue Qualys</a>
    </div>
</div>

{% if not gap.ok %}
<div class="card p-4 border border-red-700 text-red-400">
    Erreur : {{ gap.msg }}
</div>
{% else %}

<!-- KPIs -->
<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-green">{{ gap.present|length }}</div><div class="text-xs text-gray-500">Présents OK</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold text-cyber-red">{{ gap.missing_dyn|length }}</div><div class="text-xs text-gray-500">DYN manquants (console)</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold text-cyber-yellow">{{ gap.missing_stat|length }}</div><div class="text-xs text-gray-500">STAT manquants (API)</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold" style="color:#9C27B0">{{ gap.mismatch|length }}</div><div class="text-xs text-gray-500">Type divergent</div></div>
    <div class="card p-3 text-center" style="flex:1"><div class="text-2xl font-bold text-gray-400">{{ gap.extra|length }}</div><div class="text-xs text-gray-500">Extra (hors V3)</div></div>
</div>

<!-- DYN manquants -->
{% if gap.missing_dyn %}
<div class="card p-4 mb-4" style="border:1px solid #F44336">
    <div class="flex justify-between items-center mb-3">
        <h3 class="text-sm font-bold text-cyber-red">🔴 Tags DYN manquants ({{ gap.missing_dyn|length }}) — à créer MANUELLEMENT dans console Qualys</h3>
    </div>
    <p class="text-xs text-gray-400 mb-3">L'API Qualys ne permet pas de créer des tags dynamiques. Copie les étapes ci-dessous dans VMDR &gt; Assets &gt; Tags &gt; New Tag.</p>
    <table class="w-full table-cyber text-sm">
        <thead><tr>
            <th class="p-2 text-left">Tag</th>
            <th class="p-2">Catégorie</th>
            <th class="p-2 text-left">QQL à saisir</th>
            <th class="p-2">Couleur</th>
        </tr></thead>
        <tbody>
        {% for t in console_steps %}
        <tr>
            <td class="p-2 font-mono">{{ t.name }}</td>
            <td class="p-2 text-center text-xs text-gray-400">{{ t.category }}</td>
            <td class="p-2 font-mono text-xs text-cyber-accent" style="user-select:all">{{ t.qql }}</td>
            <td class="p-2 text-center"><span style="display:inline-block;width:20px;height:20px;background:{{ t.color }};border-radius:4px;vertical-align:middle"></span> <span class="text-xs text-gray-400">{{ t.color }}</span></td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- STAT manquants -->
{% if gap.missing_stat %}
<div class="card p-4 mb-4" style="border:1px solid #FF9800">
    <div class="flex justify-between items-center mb-3">
        <h3 class="text-sm font-bold text-cyber-yellow">🟡 Tags STAT manquants ({{ gap.missing_stat|length }}) — créables via API</h3>
        {% if can_modify %}
        <form method="POST" action="/qualys/tagsv3/create-all-static" style="display:inline">
            <button class="btn-sm bg-cyber-yellow text-black" onclick="return confirm('Créer {{ gap.missing_stat|length }} tags statiques dans Qualys ?')" data-loading="Création des tags...">+ Créer tous</button>
        </form>
        {% endif %}
    </div>
    <table class="w-full table-cyber text-sm">
        <thead><tr>
            <th class="p-2 text-left">Tag</th>
            <th class="p-2">Catégorie</th>
            <th class="p-2 text-left">Description</th>
            <th class="p-2">Couleur</th>
            {% if can_modify %}<th class="p-2">Action</th>{% endif %}
        </tr></thead>
        <tbody>
        {% for t in gap.missing_stat %}
        <tr>
            <td class="p-2 font-mono">{{ t.name }}</td>
            <td class="p-2 text-center text-xs text-gray-400">{{ t.category }}</td>
            <td class="p-2 text-xs">{{ t.description or '-' }}</td>
            <td class="p-2 text-center"><span style="display:inline-block;width:20px;height:20px;background:{{ t.color }};border-radius:4px;vertical-align:middle"></span></td>
            {% if can_modify %}
            <td class="p-2 text-center">
                <form method="POST" action="/qualys/tagsv3/create-static" style="display:inline">
                    <input type="hidden" name="name" value="{{ t.name }}">
                    <input type="hidden" name="color" value="{{ t.color }}">
                    <input type="hidden" name="description" value="{{ t.description }}">
                    <button class="btn-sm bg-cyber-yellow text-black text-xs">Créer</button>
                </form>
            </td>
            {% endif %}
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Mismatch -->
{% if gap.mismatch %}
<div class="card p-4 mb-4" style="border:1px solid #9C27B0">
    <h3 class="text-sm font-bold" style="color:#9C27B0">⚠ Type divergent ({{ gap.mismatch|length }})</h3>
    <p class="text-xs text-gray-400 mb-2">Le type (DYN/STAT) dans Qualys ne correspond pas au catalogue V3.</p>
    <table class="w-full table-cyber text-sm">
        <thead><tr><th class="p-2 text-left">Tag</th><th class="p-2">V3</th><th class="p-2">Qualys</th></tr></thead>
        <tbody>
        {% for m in gap.mismatch %}
        <tr><td class="p-2 font-mono">{{ m.catalog.name }}</td><td class="p-2 text-center">{{ m.catalog.type }}</td><td class="p-2 text-center">{{ m.qualys.type }}</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Présents OK -->
<details class="card p-3 mb-4">
    <summary class="cursor-pointer text-sm font-bold text-cyber-green">✓ Tags V3 présents ({{ gap.present|length }})</summary>
    <table class="w-full table-cyber text-sm mt-2">
        <thead><tr><th class="p-2 text-left">Tag</th><th class="p-2">Type</th></tr></thead>
        <tbody>
        {% for p in gap.present %}
        <tr><td class="p-2 font-mono">{{ p.catalog.name }}</td><td class="p-2 text-center"><span class="badge {% if p.catalog.type == 'DYN' %}badge-blue{% else %}badge-yellow{% endif %}">{{ p.catalog.type }}</span></td></tr>
        {% endfor %}
        </tbody>
    </table>
</details>

<!-- Extras -->
{% if gap.extra %}
<details class="card p-3">
    <summary class="cursor-pointer text-sm font-bold text-gray-400">Extras Qualys (non-V3) ({{ gap.extra|length }})</summary>
    <div class="text-xs text-gray-500 mt-2">
        {% for t in gap.extra %}<span class="mr-2">{{ t.name }}</span>{% endfor %}
    </div>
</details>
{% endif %}

{% endif %}
{% endblock %}