{{/* command-grid renders feature-grouped command checkboxes, shared by the
     per-user share-commands page and the per-org limits modal. Data:
       .Groups      []commandGroup — each {Name, Commands[]commandChoice}
       $.ShowAccess bool           — when true, also show the Members/Admins tier
                                     badge (org limits); off for per-user shares.
     Every command shows a red "Risky" badge when risky, in the same trailing slot,
     so both pages read identically. Risky commands carry data-risky so ui.js
     confirms before enabling them, and each group is a [data-check-scope] with
     Select all / none (ui.js delegated). No inline JS, so it works when swapped
     into a modal via htmx under the CSP. */}}
{{define "command-grid"}}
{{range .Groups}}
<div class="card mt-3" data-check-scope>
  <div class="card-header d-flex align-items-center">
    <h2 class="card-title mb-0">{{.Name}}</h2>
    <div class="btn-list ms-auto">
      <button type="button" class="btn btn-sm" data-check-all>Select all</button>
      <button type="button" class="btn btn-sm" data-check-none>Select none</button>
    </div>
  </div>
  <div class="list-group list-group-flush">
    {{range .Commands}}
    <label class="list-group-item d-flex align-items-center gap-2">
      <input class="form-check-input m-0" type="checkbox" name="cmd" value="{{.ID}}" {{if .Checked}}checked{{end}} {{if .Risky}}data-risky="1"{{end}}>
      <span class="flex-fill">
        <code>{{.Template}}</code>
        {{if .Args}}<span class="text-secondary ms-1">{{.Args}}</span>{{end}}
      </span>
      {{if .Risky}}<span class="badge bg-red-lt">Risky</span>{{end}}
      {{if $.ShowAccess}}
      {{if .MemberAllowed}}<span class="badge bg-azure-lt">Members</span>{{else}}<span class="badge bg-success-lt">Admins</span>{{end}}
      {{end}}
    </label>
    {{end}}
  </div>
</div>
{{end}}
{{end}}