{% from "tungsten/forms/macros.html" import wrapper, mirror %}
{% call wrapper(field, v) %}
<div x-data="{ q: '', match(text) { return !this.q || text.toLowerCase().includes(this.q.toLowerCase()); } }" class="grid gap-4">
  <label class="relative block">
    <span class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-gray-400">{{ icon('search', 'h-4 w-4') }}</span>
    <input type="search" x-model="q" placeholder="{{ __('Search permissions...') }}" class="tw-input ps-9" data-tw-local>
  </label>
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    {% for g in v.groups %}
    <fieldset class="rounded-xl p-4 ring-1 ring-gray-950/5 dark:ring-white/10" x-data="{ all(on) { $el.querySelectorAll('input[type=checkbox]:not(:disabled)').forEach(c => c.checked = on); } }"
              x-show="{{ g.options | map(attribute='label') | list | tojson | forceescape }}.some(t => match(t)) || match({{ g.label | tojson | forceescape }})">
      <div class="mb-3 flex items-center justify-between gap-2">
        <legend class="text-sm font-semibold text-gray-950 dark:text-white">{{ g.label }}</legend>
        {% if not v.disabled %}
        <span class="flex gap-2 text-xs">
          <button type="button" class="{{ colors.LINK.primary }}" @click="all(true)">{{ __('All') }}</button>
          <button type="button" class="{{ colors.LINK.gray }}" @click="all(false)">{{ __('None') }}</button>
        </span>
        {% endif %}
      </div>
      <div class="grid gap-2">
        {% for o in g.options %}
        <label class="flex items-center gap-x-3 text-sm" x-show="match({{ (o.label ~ ' ' ~ g.label) | tojson | forceescape }})">
          <input type="checkbox" name="{{ v.path }}" value="{{ o.value }}" class="tw-checkbox" {% if o.selected %}checked{% endif %} {% if v.disabled %}disabled{% endif %}>
          <span class="text-gray-700 dark:text-gray-300">{{ o.label }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>
    {% endfor %}
  </div>
</div>
{{ mirror(v) }}
{% endcall %}