{{if .FiltersReady}}
<div style="padding:14px 0;border-bottom:1px solid #e5e7eb;">
  <h5 style="font-size:13px;font-weight:700;color:#111827;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:0.5px;">Tipo de Producto</h5>
  <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;padding:3px 0;cursor:pointer;">
    <input type="checkbox" value="todos" class="filter-checkbox" data-group="type"
           onchange="if(this.checked){document.querySelectorAll('#sidebar-filters input[name=type].filter-checkbox:not([data-group=type])').forEach(function(cb){cb._bulk=1;cb.checked=false});}"
           {{if eq (len $.SelectedTypes) 0}}checked{{end}}>
    Todos
  </label>
  {{range .Filters.ProductTypes}}
  <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;padding:3px 0;cursor:pointer;">
    <input type="checkbox" name="type" value="{{.Value}}" class="filter-checkbox"
           onchange="if(this.checked){var t=document.querySelector('#sidebar-filters input[data-group=type]');if(t)t.checked=false}if(this._bulk)this._bulk=0"
           {{if contains $.SelectedTypes .Value}}checked{{end}}>
    {{.Label}} <span style="color:#9ca3af;font-size:12px;margin-left:auto;">({{.Count}})</span>
  </label>
  {{end}}
</div>

<div style="padding:14px 0;">
  <h5 style="font-size:13px;font-weight:700;color:#111827;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:0.5px;">Marca</h5>
  <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;padding:3px 0;cursor:pointer;">
    <input type="checkbox" value="todos" class="filter-checkbox" data-group="brand"
           onchange="if(this.checked){document.querySelectorAll('#sidebar-filters input[name=brand].filter-checkbox:not([data-group=brand])').forEach(function(cb){cb._bulk=1;cb.checked=false});}"
           {{if eq (len $.SelectedBrands) 0}}checked{{end}}>
    Todos
  </label>
  {{range .Filters.ProductBrands}}
  <label style="display:flex;align-items:center;gap:6px;font-size:13px;color:#374151;padding:3px 0;cursor:pointer;">
    <input type="checkbox" name="brand" value="{{.Value}}" class="filter-checkbox"
           onchange="if(this.checked){var t=document.querySelector('#sidebar-filters input[data-group=brand]');if(t)t.checked=false}if(this._bulk)this._bulk=0"
           {{if contains $.SelectedBrands .Value}}checked{{end}}>
    {{.Label}} <span style="color:#9ca3af;font-size:12px;margin-left:auto;">({{.Count}})</span>
  </label>
  {{end}}
</div>
{{else}}
<div class="catalogue-filters-loading">Calculando filtros…</div>
{{end}}