{# Query builder filter. Rules in a group are ANDed; groups are ORed. Buttons re-render the table with a `_qb` action. #}
{% from "tungsten/tables/constraint-value.html" import constraint_value with context %}
{% macro qb(action) -%}
hx-get="{{ ctx.url('_tw', 'table') }}" hx-include="closest form" hx-vals='{{ {"_qb": action} | tojson }}'
hx-target="#{{ table.id }}" hx-swap="outerHTML"
{%- endmacro %}
{% macro picker(label, where, icon_name='plus') %}
<div x-data="{ open: false }" class="grid gap-1">
  <button type="button" class="inline-flex items-center gap-1.5 justify-self-start text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400"
          @click="open = !open" :aria-expanded="open">{{ icon(icon_name, 'h-4 w-4') }}{{ label }}</button>
  <div x-show="open" x-cloak class="grid max-h-56 overflow-y-auto rounded-xl border border-gray-200 bg-white py-1 shadow-sm dark:border-white/10 dark:bg-gray-900">
    {% for c in constraints %}
    <button type="button" class="flex items-center gap-2 px-3 py-1.5 text-start text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5"
            {{ qb('add:' ~ builder.name ~ ':' ~ where ~ ':' ~ c.name) }}>
      {{ icon(c.get_icon(), 'h-4 w-4 text-gray-400') }}{{ c.get_label() }}
    </button>
    {% endfor %}
  </div>
</div>
{% endmacro %}
<div class="grid gap-3" data-tw-query-builder="{{ builder.name }}">
  <p class="tw-label">{{ builder.get_label() }}</p>
  {% for g in groups %}
  {% if not loop.first %}
  <div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
    <span class="h-px flex-1 bg-gray-200 dark:bg-white/10"></span>{{ __('or') }}<span class="h-px flex-1 bg-gray-200 dark:bg-white/10"></span>
  </div>
  {% endif %}
  <div class="grid gap-3 rounded-xl border border-gray-200 p-3 dark:border-white/10" data-tw-qb-group="{{ g.index }}">
    {% for r in g.rules %}
    {% if not loop.first %}<p class="text-xs font-medium uppercase tracking-wide text-gray-400">{{ __('and') }}</p>{% endif %}
    <div class="grid gap-2" data-tw-qb-rule>
      <input type="hidden" name="{{ r.prefix }}.c" value="{{ r.constraint.name }}">
      <div class="flex items-center justify-between gap-2">
        <span class="flex min-w-0 items-center gap-1.5 text-sm font-medium text-gray-700 dark:text-gray-200">
          {{ icon(r.constraint.get_icon(), 'h-4 w-4 shrink-0 text-gray-400') }}<span class="truncate">{{ r.constraint.get_label() }}</span>
          {% if not r.complete %}<span class="h-1.5 w-1.5 shrink-0 rounded-full bg-warning-500" title="{{ __('Not applied yet') }}"></span>{% endif %}
        </span>
        <button type="button" class="tw-icon-btn text-gray-400 hover:text-danger-600" aria-label="{{ __('Remove rule') }}" {{ qb(r.remove) }}>{{ icon('x', 'h-4 w-4') }}</button>
      </div>
      <select name="{{ r.prefix }}.op" class="tw-input pe-9" aria-label="{{ __('Operator') }}">
        {% for key, o in r.operators.items() %}<option value="{{ key }}" {% if key == r.op %}selected{% endif %}>{{ __(o[0]) }}</option>{% endfor %}
      </select>
      {{ constraint_value(r) }}
    </div>
    {% endfor %}
    {{ picker(__('Add rule'), g.index) }}
  </div>
  {% endfor %}
  {% if groups %}{{ picker(__('Add “or” group'), 'new', 'git-branch-plus') }}{% else %}{{ picker(__('Add rule'), 'new') }}{% endif %}
</div>