{% extends "ircpanel/base.html" %}
{% block title %}Tendances{% endblock %}
{% block hero_icon %}<svg viewBox="0 0 24 24"><path d="M3 3v18h18M7 14l4-4 3 3 5-6"/></svg>{% endblock %}
{% block eyebrow %}Analyse{% endblock %}
{% block heading %}Tendances{% endblock %}
{% block subtitle %}Instantané en direct — l'historique long terme s'accumule au fil du temps.{% endblock %}
{% block content %}
<div class="up-stats">
  <div class="up-stat frost-success"><div class="up-stat-num" data-live="users">{{ users }}</div><div class="up-stat-lbl">Utilisateurs</div></div>
  <div class="up-stat frost-info"><div class="up-stat-num" data-live="channels">{{ channels }}</div><div class="up-stat-lbl">Salons</div></div>
  <div class="up-stat frost-warning"><div class="up-stat-num" data-live="opers">{{ opers }}</div><div class="up-stat-lbl">Opérateurs</div></div>
  <div class="up-stat frost-secondary"><div class="up-stat-num" data-live="servers">{{ servers }}</div><div class="up-stat-lbl">Serveurs</div></div>
</div>
<div class="up-card">
  <div class="ircp-empty">Les courbes de tendance apparaîtront ici une fois assez de points collectés.</div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function(){function setNum(k,v){document.querySelectorAll('[data-live="'+k+'"]').forEach(function(el){if(v!=null)el.textContent=v;});}
function tick(){fetch("/live?counts=1",{headers:{"X-Requested-With":"fetch"}}).then(function(r){return r.json();}).then(function(j){if(j.counts){var c=j.counts;setNum("users",c.users);setNum("channels",c.channels);setNum("opers",c.opers);setNum("servers",c.servers);}}).catch(function(){});}
setInterval(tick,5000);})();
</script>
{% endblock %}