{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h2 class="text-xl font-bold text-cyber-accent mb-4">Dashboard</h2>

<!-- KPIs -->
<div class="grid grid-cols-4 gap-4 mb-6">
    <div class="card p-4 text-center">
        <div class="text-3xl font-bold text-cyber-accent">{{ stats.total_servers }}</div>
        <div class="text-xs text-gray-500">Serveurs</div>
    </div>
    <div class="card p-4 text-center">
        <div class="text-3xl font-bold text-cyber-green">{{ stats.patchable }}</div>
        <div class="text-xs text-gray-500">Patchables SecOps</div>
    </div>
    <div class="card p-4 text-center">
        <div class="text-3xl font-bold text-white">{{ stats.linux }} / {{ stats.windows }}</div>
        <div class="text-xs text-gray-500">Linux / Windows</div>
    </div>
    <div class="card p-4 text-center">
        <div class="text-3xl font-bold text-cyber-yellow">{{ stats.qualys_tags }}</div>
        <div class="text-xs text-gray-500">Tags Qualys</div>
    </div>
</div>

<!-- Par domaine -->
<div class="card p-4 mb-6">
    <h3 class="text-sm font-bold text-cyber-accent mb-3">Par domaine</h3>
    <table class="w-full table-cyber">
        <thead><tr>
            <th class="text-left p-2">Domaine</th>
            <th class="p-2">Total</th>
            <th class="p-2">Actifs</th>
            <th class="p-2">Linux</th>
            <th class="p-2">Windows</th>
        </tr></thead>
        <tbody>
        {% for d in domains %}
        <tr>
            <td class="p-2 font-medium">{{ d.name }}</td>
            <td class="p-2 text-center">{{ d.total }}</td>
            <td class="p-2 text-center text-cyber-green">{{ d.actifs }}</td>
            <td class="p-2 text-center">{{ d.linux }}</td>
            <td class="p-2 text-center">{{ d.windows }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- Par tier -->
<div class="card p-4 mb-6">
    <h3 class="text-sm font-bold text-cyber-accent mb-3">Par tier</h3>
    <div class="flex gap-4">
    {% for t in tiers %}
        <div class="flex-1 text-center p-3 rounded" style="background: {% if t[0] == 'tier0' %}#ff336622{% elif t[0] == 'tier1' %}#ff880022{% elif t[0] == 'tier2' %}#ffcc0022{% else %}#00ff8822{% endif %}">
            <div class="text-lg font-bold">{{ t[1] }}</div>
            <div class="text-xs text-gray-400">{{ t[0] }}</div>
        </div>
    {% endfor %}
    </div>
</div>

<!-- Quick stats -->
<div class="grid grid-cols-3 gap-4">
    <div class="card p-3">
        <span class="text-xs text-gray-500">Decomissionnes</span>
        <span class="float-right text-cyber-red font-bold">{{ stats.decom }}</span>
    </div>
    <div class="card p-3">
        <span class="text-xs text-gray-500">EOL</span>
        <span class="float-right text-cyber-red font-bold">{{ stats.eol }}</span>
    </div>
    <div class="card p-3">
        <span class="text-xs text-gray-500">Assets Qualys</span>
        <span class="float-right text-cyber-accent font-bold">{{ stats.qualys_assets }}</span>
    </div>
</div>
{% endblock %}