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

{% block content %}
<div class="page-header">
  <h1>Dashboard</h1>
  <p>Vue d'ensemble de votre configuration SecurityKit</p>
</div>

<!-- Mode strict actuel -->
<div class="card" style="border-left: 4px solid {% if strict_state.mode == 'lockdown' %}#e05c5c{% elif strict_state.mode == 'strict' %}#e0a050{% else %}#4fc77a{% endif %};">
  <div class="card-title">Mode de sécurité actuel</div>
  <span class="mode-badge mode-{{ strict_state.mode }}">{{ strict_state.mode|upper }}</span>
  {% if strict_state.is_active %}
    <span style="margin-left: 12px; font-size: 13px; color: var(--text-muted);">
      Depuis {{ strict_state.activated_at|date:"d/m/Y H:i" }} — {{ strict_state.reason|default:"Aucune raison" }}
    </span>
    <div style="margin-top: 10px;">
      <form method="post" action="{% url 'xeolux_securitykit:strict_mode_deactivate' %}" style="display:inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm">Désactiver</button>
      </form>
    </div>
  {% endif %}
</div>

<!-- Stats -->
<div class="grid-4">
  <div class="card">
    <div class="card-title">Routes protégées</div>
    <div class="card-value">{{ route_count }}</div>
    <a href="{% url 'xeolux_securitykit:routes' %}" style="font-size: 12px; color: var(--text-muted);">Gérer →</a>
  </div>
  <div class="card">
    <div class="card-title">IPs whitelist</div>
    <div class="card-value">{{ wl_count }}</div>
    <a href="{% url 'xeolux_securitykit:whitelist' %}" style="font-size: 12px; color: var(--text-muted);">Gérer →</a>
  </div>
  <div class="card">
    <div class="card-title">IPs blacklist</div>
    <div class="card-value">{{ bl_count }}</div>
    <a href="{% url 'xeolux_securitykit:blacklist' %}" style="font-size: 12px; color: var(--text-muted);">Gérer →</a>
  </div>
  <div class="card">
    <div class="card-title">Clés API actives</div>
    <div class="card-value">{{ api_key_count }}</div>
    <a href="{% url 'xeolux_securitykit:api_keys' %}" style="font-size: 12px; color: var(--text-muted);">Gérer →</a>
  </div>
</div>

<!-- Modules actifs -->
<div class="card">
  <div class="card-title">Modules activés</div>
  <div style="display: flex; flex-wrap: wrap; gap: 8px;">
    {% for module in modules %}
      <span class="badge {% if module.enabled %}badge-ok{% else %}badge-warn{% endif %}">
        {{ module.label }}
      </span>
    {% endfor %}
  </div>
  <div style="margin-top: 12px;">
    <a href="{% url 'xeolux_securitykit:modules' %}" class="btn btn-outline btn-sm">Gérer les modules</a>
  </div>
</div>

<!-- Actions rapides -->
<div class="card">
  <div class="card-title">Actions rapides</div>
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <a href="{% url 'xeolux_securitykit:route_add' %}" class="btn btn-primary btn-sm">+ Route protégée</a>
    <a href="{% url 'xeolux_securitykit:whitelist' %}" class="btn btn-outline btn-sm">+ Whitelist IP</a>
    <a href="{% url 'xeolux_securitykit:api_key_create' %}" class="btn btn-outline btn-sm">+ Clé API</a>
    <a href="{% url 'xeolux_securitykit:diagnostics' %}" class="btn btn-outline btn-sm">Diagnostics</a>
    <a href="{% url 'xeolux_securitykit:rule_tester' %}" class="btn btn-outline btn-sm">Tester une règle</a>
    <a href="{% url 'xeolux_securitykit:strict_mode' %}" class="btn btn-outline btn-sm">Strict mode</a>
  </div>
</div>
{% endblock %}