{% extends 'generic/object.html' %}
{% load i18n %}
{% load helpers %}

{% block content %}
<div class="card">
  <div class="card-body p-0">
    <div class="p-3">
      {% if active_src_zones or active_dst_zones %}
        <div class="alert alert-info d-flex align-items-start gap-2 mb-3 py-2">
          <i class="mdi mdi-filter-outline mt-1"></i>
          <div class="flex-grow-1">
            <strong>Active zone filter</strong>
            {% if active_src_zones %}
              &nbsp;&mdash;&nbsp;
              <span class="text-muted small">Source:</span>
              {% for z in active_src_zones %}
                <a href="{% url 'plugins:netbox_nsm:securityzone' z.pk %}" class="badge text-bg-secondary text-decoration-none">{{ z.name }}</a>
              {% endfor %}
            {% endif %}
            {% if active_dst_zones %}
              &nbsp;&rarr;&nbsp;
              <span class="text-muted small">Destination:</span>
              {% for z in active_dst_zones %}
                <a href="{% url 'plugins:netbox_nsm:securityzone' z.pk %}" class="badge text-bg-secondary text-decoration-none">{{ z.name }}</a>
              {% endfor %}
            {% endif %}
          </div>
          <a href="{{ request.path }}" class="btn btn-sm btn-outline-secondary ms-2">
            <i class="mdi mdi-close"></i> Reset filter
          </a>
        </div>
      {% endif %}

      {% if active_src_objs or active_dst_objs %}
        <div class="alert alert-info d-flex align-items-start gap-2 mb-3 py-2">
          <i class="mdi mdi-tag-multiple-outline mt-1"></i>
          <div class="flex-grow-1">
            <strong>Active object filter</strong>
            {% if active_src_objs %}
              &nbsp;&mdash;&nbsp;
              <span class="text-muted small">Source:</span>
              {% for obj in active_src_objs %}
                <a href="{{ obj.get_absolute_url }}"
                   class="badge text-decoration-none"
                   style="background:{{ obj.custom_type.color|default:'#6c757d' }};color:#fff;">
                  {{ obj.name }}
                </a>
              {% endfor %}
            {% endif %}
            {% if active_dst_objs %}
              &nbsp;&rarr;&nbsp;
              <span class="text-muted small">Destination:</span>
              {% for obj in active_dst_objs %}
                <a href="{{ obj.get_absolute_url }}"
                   class="badge text-decoration-none"
                   style="background:{{ obj.custom_type.color|default:'#6c757d' }};color:#fff;">
                  {{ obj.name }}
                </a>
              {% endfor %}
            {% endif %}
          </div>
          <a href="{{ request.path }}" class="btn btn-sm btn-outline-secondary ms-2">
            <i class="mdi mdi-close"></i> Reset filter
          </a>
        </div>
      {% endif %}

      {% if is_security_rules %}
        <style>
          .nsm-policy-table {
            overflow-x: auto;
          }
          .nsm-policy-table .table {
            --bs-table-bg: transparent;
            margin-bottom: 0;
          }
          .nsm-policy-table .table thead th {
            border-bottom-width: 1px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
          }
          .nsm-policy-table .table thead th a {
            color: inherit;
          }
          .nsm-policy-table .table tbody td {
            padding-top: .55rem;
            padding-bottom: .55rem;
            vertical-align: top;
            white-space: nowrap;
          }
          .nsm-policy-table .table tbody tr:hover {
            --bs-table-accent-bg: rgba(140, 94, 47, .05);
          }
          .nsm-policy-table .table tbody td:nth-child(2),
          .nsm-policy-table .table tbody td:nth-child(3) {
            white-space: nowrap;
          }
          .nsm-policy-table .table tbody td:nth-child(3) {
            text-align: center;
          }
          .nsm-rule-stack {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: .3rem;
          }
          .nsm-rule-card {
            background: #fcfaf6;
            border: 1px solid #ece2d3;
            border-radius: .7rem;
            min-width: 0;
            padding: .28rem .4rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
          }
          .nsm-rule-label {
            color: #7c6a55;
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: .08em;
            line-height: 1.1;
            margin-bottom: .18rem;
            text-align: left;
            text-transform: uppercase;
          }
          .nsm-rule-pills {
            display: flex;
            flex-wrap: nowrap;
            gap: .24rem;
            align-items: center;
          }
          .nsm-rule-pill {
            background: #efe6da;
            border: 1px solid #e2d3bf;
            border-radius: 999px;
            color: #4b3d2f;
            display: inline-block;
            font-size: .7rem;
            font-weight: 600;
            line-height: 1.6;
            padding: .2rem .45rem;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
          }
          .nsm-rule-pill:hover {
            background: #e7dac7;
            color: #3e3227;
          }
          .nsm-rule-pill-zone {
            border-color: rgba(255,255,255,.24);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
            font-weight: 700;
          }
          .nsm-rule-pill-accent {
            background: #d7eadc;
            border-color: #bdd5c3;
            color: #204e2d;
          }
          .nsm-rule-pill-success {
            background: #d9f1df;
            border-color: #b6debf;
            color: #215a2f;
          }
          .nsm-rule-pill-muted {
            background: #ece9e4;
            border-color: #ddd7cf;
            color: #6b6257;
          }
          .nsm-status-icon {
            align-items: center;
            border-radius: 999px;
            display: inline-flex;
            height: 1.6rem;
            justify-content: center;
            width: 1.6rem;
          }
          .nsm-status-icon i {
            font-size: 1rem;
            line-height: 1;
          }
          .nsm-status-icon-on {
            background: #d9f1df;
            color: #1f7a33;
          }
          .nsm-status-icon-off {
            background: #f3e0df;
            color: #a63a32;
          }
          .nsm-search-toggle {
            cursor: pointer;
            list-style: none;
            user-select: none;
            border-radius: .5rem;
            padding: .35rem .75rem;
          }
          .nsm-search-toggle::-webkit-details-marker { display: none; }
          .nsm-search-toggle::marker { display: none; }
        </style>
        <div class="mb-3 d-flex align-items-center justify-content-between gap-2">
          <strong>Security Rules</strong>
          {% if perms.netbox_nsm.add_securityzonepolicyrule %}
            <a href="{% url 'plugins:netbox_nsm:securityzonepolicyrule_add' %}?rulebook={{ object.pk }}&return_url={{ request.path|urlencode }}" class="btn btn-sm btn-primary">
              <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Rule
            </a>
          {% endif %}
        </div>
        <details class="mb-3" {% if search_q %}open{% endif %}>
          <summary class="nsm-search-toggle d-flex align-items-center gap-2">
            <i class="mdi mdi-magnify"></i>
            <span class="fw-semibold small">Search</span>
            {% if search_q %}
              <span class="badge text-bg-warning ms-1">active</span>
            {% endif %}
            <i class="mdi mdi-chevron-down ms-auto"></i>
          </summary>
          <form method="get" class="mt-2 p-3 border rounded">
            <div class="row g-2 align-items-end">
              <div class="col-sm-6">
                <input type="text" name="q" value="{{ search_q|default:'' }}"
                       class="form-control form-control-sm"
                       placeholder="Name, description, zones, objects …">
              </div>
              <div class="col-auto d-flex gap-1">
                <button type="submit" class="btn btn-sm btn-primary">
                  <i class="mdi mdi-magnify"></i>
                </button>
                <a href="{{ request.path }}" class="btn btn-sm btn-outline-secondary">
                  <i class="mdi mdi-close"></i>
                </a>
              </div>
            </div>
            {% for v in src_filter %}
              <input type="hidden" name="source_zones_id" value="{{ v }}">
            {% endfor %}
            {% for v in dst_filter %}
              <input type="hidden" name="destination_zones_id" value="{{ v }}">
            {% endfor %}
          </form>
        </details>
      {% endif %}

      <form method="post" id="nsm-bulk-delete-form">
        {% csrf_token %}
        <div id="nsm-bulk-toolbar" class="mb-2 d-none">
          <button type="submit" class="btn btn-sm btn-danger"
                  onclick="return confirm('Delete selected rules?')">
            <i class="mdi mdi-delete-outline me-1"></i>
            <span id="nsm-selected-count">0</span> rule(s) delete
          </button>
        </div>
        <div class="nsm-policy-table">
          {% include 'htmx/table.html' %}
        </div>
      </form>
      <script>
      (function () {
        var form = document.getElementById('nsm-bulk-delete-form');
        var toolbar = document.getElementById('nsm-bulk-toolbar');
        var countEl = document.getElementById('nsm-selected-count');
        function update() {
          var checked = form.querySelectorAll('input[name="pk"]:checked');
          if (checked.length > 0) {
            toolbar.classList.remove('d-none');
            countEl.textContent = checked.length;
          } else {
            toolbar.classList.add('d-none');
          }
        }
        document.addEventListener('change', function (e) {
          if (e.target && (e.target.name === 'pk' || e.target.id === 'select-all')) {
            update();
          }
        });
      })();
      </script>
    </div>
  </div>
</div>
{% endblock %}