{% extends "ircpanel/base.html" %}
{% block title %}{{ heading }}{% endblock %}
{% block hero_icon %}<svg viewBox="0 0 24 24"><path d="M12 3l8 3v5c0 4.5-3 7.5-8 10-5-2.5-8-5.5-8-10V6z"/></svg>{% endblock %}
{% block eyebrow %}Protection du réseau{% endblock %}
{% block heading %}{{ heading }} <span class="ircp-count">{{ total }}</span>{% endblock %}
{% block subtitle %}{{ subtitle }}{% endblock %}
{% block content %}

<input class="ircp-search" id="bq" type="search" placeholder="Filtrer par masque, motif ou opérateur…" autocomplete="off">

<div class="ufilters">
  <button type="button" class="ufilter ufilter--static"><b>{{ total }}</b><span>Total</span></button>
  <button type="button" class="ufilter ufilter--static"><b>{{ perm }}</b><span>Permanents</span></button>
</div>

<div class="up-card">
  <div class="proster is-typed" id="broster">
    <div class="prow-head">
      <span>Type</span><span>Masque</span><span>Motif</span><span>Par</span><span>Expire</span>
    </div>
    {% for b in rows %}
    <div class="prow" data-q="{{ b.mask }} {{ b.reason }} {{ b.set_by }} {{ b.kind }}">
      <span class="ptag ptag--gline">{{ b.kind }}</span>
      <span class="prow-main">
        <span class="prow-mask mono">{{ b.mask }}</span>
        <span class="prow-reason">{% if b.reason.is_empty() %}<span class="muted">Aucun motif</span>{% else %}{{ b.reason }}{% endif %}</span>
      </span>
      <span class="prow-by">{% if b.set_by.is_empty() %}—{% else %}{{ b.set_by }}{% endif %}{% if !b.set_ago.is_empty() %} · {{ b.set_ago }}{% endif %}</span>
      <span class="prow-exp {% if b.perm %}is-perm{% endif %}">{{ b.expires }}</span>
    </div>
    {% endfor %}
    {% if rows.is_empty() %}<div class="prow-empty ircp-empty">{{ empty }}</div>{% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var rows = [].slice.call(document.querySelectorAll("#broster .prow"));
  var q = document.getElementById("bq");
  q.addEventListener("input", function () {
    var t = (q.value || "").toLowerCase();
    rows.forEach(function (r) { r.hidden = t && (r.dataset.q || "").toLowerCase().indexOf(t) < 0; });
  });
})();
</script>
{% endblock %}