{% extends "xeolux_securitykit/base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Dashboard</h1>
  <p>Vue d’ensemble de votre sécurité</p>
</div>

<!-- Mode courant -->
<div class="card" style="border-left: 3px solid {% if strict_state.mode == 'lockdown' %}var(--red){% elif strict_state.mode == 'strict' %}var(--orange){% else %}var(--green){% endif %}; padding-left: 18px;">
  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
    <div>
      <div class="card-title" style="margin-bottom:6px;">Mode de sécurité</div>
      <span class="mode-pill mode-{{ strict_state.mode }}">{{ strict_state.mode|upper }}</span>
      {% if strict_state.is_active %}
      <span style="margin-left:12px; font-size:12px; color:var(--label-3);">
        Depuis {{ strict_state.activated_at|date:"d/m/Y H:i" }} — {{ strict_state.reason|default:"Aucune raison" }}
      </span>
      {% endif %}
    </div>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
      {% if strict_state.is_active %}
      <form method="post" action="{% url 'xeolux_securitykit:strict_mode_deactivate' %}">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm">Désactiver</button>
      </form>
      {% endif %}
      <a href="{% url 'xeolux_securitykit:strict_mode' %}" class="btn btn-ghost btn-sm">Gérer →</a>
    </div>
  </div>
</div>

<!-- Stats -->
<div class="grid-4">
  <div class="stat-card">
    <div class="stat-icon">⬡</div>
    <div class="stat-value">{{ route_count }}</div>
    <div class="stat-label">Routes protégées</div>
    <a href="{% url 'xeolux_securitykit:routes' %}" class="stat-action">Gérer →</a>
  </div>
  <div class="stat-card">
    <div class="stat-icon">✓</div>
    <div class="stat-value">{{ wl_count }}</div>
    <div class="stat-label">IPs whitelist</div>
    <a href="{% url 'xeolux_securitykit:whitelist' %}" class="stat-action">Gérer →</a>
  </div>
  <div class="stat-card">
    <div class="stat-icon">✕</div>
    <div class="stat-value">{{ bl_count }}</div>
    <div class="stat-label">IPs blacklist</div>
    <a href="{% url 'xeolux_securitykit:blacklist' %}" class="stat-action">Gérer →</a>
  </div>
  <div class="stat-card">
    <div class="stat-icon">⚗</div>
    <div class="stat-value">{{ api_key_count }}</div>
    <div class="stat-label">Clés API actives</div>
    <a href="{% url 'xeolux_securitykit:api_keys' %}" class="stat-action">Gérer →</a>
  </div>
</div>

<!-- Modules actifs -->
<div class="card">
  <div class="card-header">
    <div class="card-title">Modules actifs</div>
    <a href="{% url 'xeolux_securitykit:modules' %}" class="btn btn-ghost btn-sm">Tout gérer</a>
  </div>
  <div style="display:flex; flex-wrap:wrap; gap:6px;">
    {% for module in modules %}
      <span class="badge {% if module.enabled %}badge-ok{% else %}badge-neutral{% endif %}">
        {{ module.label }}
      </span>
    {% endfor %}
  </div>
</div>

<!-- Actions rapides -->
<div class="card">
  <div class="card-title" style="margin-bottom:14px;">Actions rapides</div>
  <div style="display:flex; gap:8px; flex-wrap:wrap;">
    <a href="{% url 'xeolux_securitykit:route_add' %}" class="btn btn-primary btn-sm">+ Route</a>
    <a href="{% url 'xeolux_securitykit:whitelist' %}" class="btn btn-ghost btn-sm">+ Whitelist IP</a>
    <a href="{% url 'xeolux_securitykit:api_key_create' %}" class="btn btn-ghost btn-sm">+ Clé API</a>
    <a href="{% url 'xeolux_securitykit:diagnostics' %}" class="btn btn-ghost btn-sm">◎ Diagnostics</a>
    <a href="{% url 'xeolux_securitykit:rule_tester' %}" class="btn btn-ghost btn-sm">▷ Tester règle</a>
  </div>
</div>
{% endblock %}