{% 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.

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

<div class="permission-widget">
  {% for app_label, models in widget.grouped_choices %}
    <div class="mb-3">
      <h4 class="subheader">{{ app_label }}</h4>
      {% for model_verbose, perms in models %}
        <div class="mb-2 ps-2">
          <strong class="text-muted small">{{ model_verbose }}</strong>
          <div class="d-flex flex-wrap gap-2 mt-1">
            {% for perm in perms %}
              <label class="form-check form-check-inline">
                <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>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% empty %}
    <p class="text-muted">{% trans "No permissions available." %}</p>
  {% endfor %}
</div>