{% comment %}
Generic column visibility picker. Renders checkboxes for columns with visible_key.
Expects parent Alpine scope: colsOpen, cols.
Expects template variable: columns (list of column dicts from table_config).
{% endcomment %}
<div class="relative overflow-visible" x-show="Object.keys(cols).length > 0" x-cloak>
  <button @click="colsOpen = !colsOpen" class="h-9 px-3 rounded-md border border-input bg-background text-sm hover:bg-muted/50 flex items-center gap-1">
    Columns <span class="text-muted-foreground">▼</span>
  </button>
  <div x-show="colsOpen" @click.outside="colsOpen = false" @click.stop
       class="absolute left-0 top-full mt-1 min-w-[220px] rounded-md border border-border bg-card p-3 shadow-lg z-50">
    <div class="space-y-1.5 text-sm">
      {% for col in columns %}{% if col.visible_key %}
      <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="cols.{{ col.visible_key }}" class="h-4 w-4 shrink-0 rounded border-input" /> {{ col.header }}</label>
      {% endif %}{% endfor %}
    </div>
  </div>
</div>