{% extends 'base/layout.html' %}
{% load i18n %}
{% load helpers %}

{% block title %}{% trans "Global Rules Search" %}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1 class="h3 mb-0">
    <i class="mdi mdi-shield-search me-2"></i>
    {% trans "Global Rules Search" %}
    {% if total_count %}
      <span class="badge text-bg-secondary ms-2">{{ total_count }}</span>
    {% endif %}
  </h1>
  <a href="{% url 'plugins:netbox_nsm:rulebook_list' %}" class="btn btn-sm btn-outline-secondary">
    <i class="mdi mdi-arrow-left me-1"></i>{% trans "Back to Rulebooks" %}
  </a>
</div>

{# ── Query Bar ── #}
<div class="card mb-3">
  <div class="card-body py-3">
    <form method="get" id="nsm-global-search-form">
      <div class="input-group mb-2">
        <span class="input-group-text text-muted"><i class="mdi mdi-filter-outline"></i></span>
        <input type="text" name="nsm_q" id="nsm-global-q"
               value="{{ nsm_q|default:'' }}"
               class="form-control font-monospace{% if nsm_query_error %} is-invalid{% endif %}"
               placeholder="e.g. Source.Name = Web AND Action = Permit"
               autofocus
               autocomplete="off"
               spellcheck="false">
        {% if nsm_q %}
          <a href="{{ request.path }}" class="btn btn-outline-secondary" title="Clear">
            <i class="mdi mdi-close"></i>
          </a>
        {% endif %}
        <button type="submit" class="btn btn-primary">
          <i class="mdi mdi-magnify me-1"></i>Search
        </button>
        <button type="button" class="btn btn-outline-secondary" id="nsm-gs-copy"
                title="Copy query" {% if not nsm_q %}disabled{% endif %}>
          <i class="mdi mdi-content-copy"></i>
        </button>
      </div>
      {% if nsm_query_error %}
        <div class="invalid-feedback d-block small">
          <i class="mdi mdi-alert-outline me-1"></i>{{ nsm_query_error }}
        </div>
      {% endif %}
    </form>

    {# Help #}
    <details class="mt-1">
      <summary style="list-style:none;cursor:pointer;font-size:12px;" class="text-muted d-inline-flex align-items-center gap-1">
        <i class="mdi mdi-help-circle-outline"></i>
        <span>Query syntax</span>
        <i class="mdi mdi-chevron-down"></i>
      </summary>
      <div class="mt-2 border rounded p-3" style="font-size:12px;">
        <div class="row g-3">
          <div class="col-md-6">
            <strong class="text-body d-block mb-1">Operators</strong>
            <table class="table table-sm table-borderless mb-0" style="font-size:11px;">
              <tbody>
                <tr><td><code>=</code></td><td>equals</td><td><code>Action = Permit</code></td></tr>
                <tr><td><code>!=</code></td><td>not equals</td><td><code>Action != Deny</code></td></tr>
                <tr><td><code>contains</code></td><td>text / IP in subnet</td><td><code>Src.Address contains 10.0.0.0</code></td></tr>
                <tr><td><code>exists</code></td><td>has a value</td><td><code>Destination exists</code></td></tr>
                <tr><td><code>!exists</code></td><td>is empty</td><td><code>Owner !exists</code></td></tr>
                <tr><td><code>in</code></td><td>one of list</td><td><code>Service.Name in (HTTP, HTTPS)</code></td></tr>
                <tr><td><code>notin</code></td><td>none of list</td><td><code>Action notin (Deny)</code></td></tr>
              </tbody>
            </table>
          </div>
          <div class="col-md-6">
            <strong class="text-body d-block mb-1">Examples</strong>
            <ul class="list-unstyled mb-0" style="line-height:1.9;">
              <li><a href="?nsm_q=Action+%3D+Permit" class="font-monospace small">Action = Permit</a></li>
              <li><a href="?nsm_q=Name+contains+allow" class="font-monospace small">Name contains allow</a></li>
              <li><a href="?nsm_q=Source.Name+%3D+Web+AND+Action+%3D+Permit" class="font-monospace small">Source.Name = Web AND Action = Permit</a></li>
              <li><a href="?nsm_q=Service.Name+in+(HTTP,+HTTPS,+SSH)" class="font-monospace small">Service.Name in (HTTP, HTTPS, SSH)</a></li>
            </ul>
            <div class="mt-2 text-muted" style="font-size:11px;">
              <i class="mdi mdi-information-outline me-1"></i>
              Field names match Rulebook column slugs (case-insensitive). Combine with <code>AND</code>.
            </div>
          </div>
        </div>
      </div>
    </details>
  </div>
</div>

{# ── Results grouped by Rulebook ── #}
{% if rulebook_groups %}
  <div class="mb-2 small text-muted">
    <strong>{{ total_count }}</strong> matching rules across
    <strong>{{ rulebook_groups|length }}</strong> rulebook{{ rulebook_groups|length|pluralize }}
  </div>
  <div class="row g-3">
    {% for group in rulebook_groups %}
      <div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
          <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <span>
              <i class="mdi mdi-book-open-outline me-1 text-muted"></i>
              {% if group.rulebook %}
                <a href="{{ group.rulebook.get_absolute_url }}" class="fw-semibold">{{ group.rulebook.name }}</a>
              {% else %}
                <span class="text-muted fw-semibold">(no rulebook)</span>
              {% endif %}
            </span>
            <span class="badge text-bg-primary ms-1">{{ group.count }}</span>
          </div>
          <div class="card-footer py-2 d-flex justify-content-between align-items-center">
            <small class="text-muted">{{ group.count }} rule{{ group.count|pluralize }} match</small>
            {% if group.policy_url %}
              <a href="{{ group.policy_url }}" class="btn btn-sm btn-outline-primary">
                <i class="mdi mdi-open-in-new me-1"></i>Open with filter
              </a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

{% elif nsm_q and not nsm_query_error %}
  <div class="alert alert-warning">
    <i class="mdi mdi-magnify-close me-1"></i>
    No rules found for query: <strong>{{ nsm_q }}</strong>
  </div>
{% elif nsm_query_error %}
  <div class="alert alert-danger">
    <i class="mdi mdi-alert-outline me-1"></i>
    Query syntax error: {{ nsm_query_error }}
  </div>
{% endif %}

<script>
(function () {
  var btn = document.getElementById('nsm-gs-copy');
  var inp = document.getElementById('nsm-global-q');
  if (!btn || !inp) return;
  btn.addEventListener('click', function () {
    var text = inp.value;
    if (!text) return;
    navigator.clipboard.writeText(text).then(function () {
      var icon = btn.querySelector('i');
      if (icon) { icon.className = 'mdi mdi-check'; }
      setTimeout(function () { if (icon) { icon.className = 'mdi mdi-content-copy'; } }, 1500);
    });
  });
  inp.addEventListener('input', function () { btn.disabled = !inp.value.trim(); });
})();
</script>
{% endblock %}