{% extends "ircpanel/base.html" %}
{% load i18n %}
{% block title %}{% trans "Exceptions" %}{% endblock %}
{% block heading %}{% trans "Exceptions de ban" %} <span class="ircp-count">{{ bans|length }}</span>{% endblock %}
{% block eyebrow %}{% trans "Protection" %}{% endblock %}
{% block subtitle %}{% trans "Exceptions et hôtes de confiance." %}{% endblock %}
{% block hero_icon %}<svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/></svg>{% endblock %}
{% block topright %}<div class="ircp-search"><input type="text" id="exSearch" autocomplete="off" placeholder="{% trans "Filtrer (masque, raison, oper)…" %}"></div>{% endblock %}

{% block content %}
{% if 'ban' in panel_perms %}
<div class="ircp-card ircp-card--form">
  <h3>{% trans "Ajouter une exception (E-Line)" %}</h3>
  <form method="post" action="{% url 'ircpanel:exception_add' %}" class="ircp-form">
    {% csrf_token %}
    <label class="ircp-form-grow">{% trans "Masque" %} <input type="text" name="mask" placeholder="{% trans "*@trusted.host ou *@1.2.3.0/24" %}" required></label>
    <label>{% trans "Durée (s, 0 = permanent)" %} <input type="number" name="duration" value="0" min="0"></label>
    <label class="ircp-form-grow">{% trans "Raison" %} <input type="text" name="reason" placeholder="{% trans "Raison" %}"></label>
    <button type="submit" class="ircp-btn">{% trans "Ajouter" %}</button>
  </form>
</div>
{% endif %}

<div class="ufilters" id="exfilters">
  <button type="button" class="ufilter is-active" data-f="all"><b>{{ bstats.total }}</b><span>{% trans "Toutes" %}</span></button>
  <button type="button" class="ufilter" data-f="perm"><b>{{ bstats.perm }}</b><span>{% trans "Permanentes" %}</span></button>
  <button type="button" class="ufilter" data-f="timed"><b>{{ bstats.timed }}</b><span>{% trans "Temporaires" %}</span></button>
</div>

<div class="up-card proster is-simple">
  <div class="prow-head"><span></span><span>{% trans "Masque" %}</span><span>{% trans "Par" %}</span><span>{% trans "Expire" %}</span><span></span></div>
  <div id="exRoster">
    {% for b in bans %}
    <div class="prow" data-perm="{% if b.expire_dt %}0{% else %}1{% endif %}" data-s="{{ b.name|lower }} {{ b.reason|lower }} {{ b.set_by|lower }}">
      <span class="pava pava--exc"><svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/></svg></span>
      <span class="prow-main"><span class="prow-mask mono">{{ b.name }}</span><span class="prow-reason">{{ b.reason|default:"—" }}</span></span>
      <span class="prow-by">{{ b.set_by }}</span>
      <span class="prow-exp {% if not b.expire_dt %}is-perm{% endif %}">{% if b.expire_dt %}{{ b.expire_dt|date:"d/m/Y H:i" }}{% else %}{% trans "permanent" %}{% endif %}</span>
      <span class="prow-act">{% if 'ban' in panel_perms %}<form method="post" action="{% url 'ircpanel:exception_del' %}" data-confirm="{% trans "Retirer cette exception ?" %}">
        {% csrf_token %}<input type="hidden" name="mask" value="{{ b.name }}">
        <button type="submit" class="ircp-btn ircp-btn--danger">{% trans "Retirer" %}</button>
      </form>{% endif %}</span>
    </div>
    {% empty %}<div class="prow-empty">{% trans "Aucune exception active." %}</div>{% endfor %}
  </div>
  <div class="prow-empty" id="exEmpty" hidden>{% trans "Aucune exception ne correspond à ce filtre." %}</div>
</div>

<script nonce="{{ request.csp_nonce }}">
(function () {
  var rows = [].slice.call(document.querySelectorAll("#exRoster .prow"));
  var empty = document.getElementById("exEmpty");
  var search = document.getElementById("exSearch");
  if (!rows.length) return;
  var curF = "all";
  function apply() {
    var q = (search && search.value || "").trim().toLowerCase(), shown = 0;
    rows.forEach(function (r) {
      var catOk = curF === "all" || (curF === "perm" && r.dataset.perm === "1") || (curF === "timed" && r.dataset.perm === "0");
      var ok = catOk && (!q || r.dataset.s.indexOf(q) > -1);
      r.style.display = ok ? "" : "none"; if (ok) shown++;
    });
    if (empty) empty.hidden = shown > 0;
  }
  document.querySelectorAll("#exfilters .ufilter[data-f]").forEach(function (b) {
    b.addEventListener("click", function () {
      document.querySelectorAll("#exfilters .ufilter").forEach(function (x) { x.classList.remove("is-active"); });
      b.classList.add("is-active"); curF = b.dataset.f; apply();
    });
  });
  if (search) search.addEventListener("input", apply);
})();
</script>
{% endblock %}