{% comment %}
  Grouped permission checkbox widget for TenantRoleForm.

  Renders permissions grouped by app_label > model, with each verb as a
  checkbox. System permissions (from AppConfig) are shown as disabled
  checked boxes.

  Live-filter input at the top: case-insensitive substring match against
  ``"<app> <model> <verb>"`` per checkbox, powered by Alpine. Hidden
  individual checkboxes still submit their value (system perms via
  ``<input type="hidden">``) — filtering is purely visual, no data loss.
  Empty model / app groups hide themselves via CSS :has(), so the layout
  stays clean while typing.

  Context:
    widget.grouped_choices — list of (app_label, [(model_verbose, [perm_dict, ...])])
    widget.name — HTML input name
{% endcomment %}
{% load i18n %}

<div class="permission-widget"
     x-data="{
        q: '',
        onlyChecked: false,
        visible(text, rowHasChecked) {
            if (this.onlyChecked && !rowHasChecked) return false;
            if (!this.q) return true;
            return (text || '').toLowerCase().includes(this.q.toLowerCase());
        }
     }">
  <div class="permission-widget__filter-bar mb-3 position-relative">
    <input type="text"
           class="form-control form-control-sm permission-widget__filter-input"
           placeholder="{% trans 'Filter permissions…' %}"
           aria-label="{% trans 'Filter permissions' %}"
           x-model="q"
           autocomplete="off">
    <i class="ti ti-search permission-widget__filter-icon pe-none text-secondary"></i>
    <div class="permission-widget__filter-actions">
      <a role="button"
         class="text-secondary text-decoration-none lh-1 d-inline-flex"
         x-show="q"
         x-cloak
         @click="q = ''"
         title="{% trans 'Clear search' %}"
         aria-label="{% trans 'Clear search' %}">
        <i class="ti ti-x"></i>
      </a>
      <a role="button"
         class="text-decoration-none lh-1 d-inline-flex"
         :class="onlyChecked ? 'text-primary' : 'text-secondary'"
         @click="onlyChecked = !onlyChecked"
         :aria-pressed="onlyChecked.toString()"
         title="{% trans 'Show only models with assigned permissions' %}"
         aria-label="{% trans 'Show only models with assigned permissions' %}">
        <i class="ti ti-list-check"></i>
      </a>
    </div>
  </div>
  <div class="permission-widget__scroll">
    {% for app_label, models in widget.grouped_choices %}
      <div class="mb-3 permission-widget__app">
        <h4 class="subheader">{{ app_label }}</h4>
        {% for model_verbose, perms in models %}
          <div class="mb-2 ps-2 permission-widget__model">
            <strong class="text-muted small">{{ model_verbose }}</strong>
            <div class="d-flex flex-wrap gap-2 mt-1">
              {% for perm in perms %}
                {% with search=app_label|add:" "|add:model_verbose|add:" "|add:perm.verb %}
                  <label class="form-check form-check-inline permission-widget__item"
                         :class="{ 'd-none': !visible('{{ search|lower|escapejs }}', {{ perm.row_has_checked|yesno:'true,false' }}) }">
                    <input type="checkbox"
                           class="form-check-input"
                           name="{{ perm.name }}"
                           value="{{ perm.pk }}"
                           {% if perm.checked %}checked{% endif %}
                           {% if perm.is_system %}disabled{% endif %}>
                    <span class="form-check-label">
                      {{ perm.verb }}
                      {% if perm.is_system %}
                        <i class="ti ti-lock text-muted ms-1" title="{% trans 'Defined by plugin' %}"></i>
                      {% endif %}
                    </span>
                    {% if perm.is_system %}
                      {# Hidden input ensures disabled checkboxes still submit their value. #}
                      <input type="hidden" name="{{ perm.name }}" value="{{ perm.pk }}">
                    {% endif %}
                  </label>
                {% endwith %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      </div>
    {% empty %}
      <p class="text-muted">{% trans "No permissions available." %}</p>
    {% endfor %}
  </div>
</div>