{{ define "catalog_table" }}
<div class="card" id="catalog-table">
  <table class="table">
    <thead><tr><th></th><th>{{ T "catalog.col.name" }}</th><th>{{ T "catalog.col.sku" }}</th><th>{{ T "catalog.col.price" }}</th><th>{{ T "catalog.col.unit" }}</th><th>{{ T "catalog.col.tax" }}</th><th></th></tr></thead>
    <tbody>
      {{ if .Items }}
        {{ range .Items }}
          <tr class="catalog-row"
              data-id="{{ .ID }}" data-name="{{ .Name }}" data-sku="{{ .SKU }}"
              data-description="{{ .Description }}" data-unit="{{ .Unit }}"
              data-weighed="{{ if .IsWeighed }}1{{ else }}0{{ end }}"
              data-category="{{ with .CategoryID }}{{ . }}{{ end }}"
              data-brand="{{ with .BrandID }}{{ . }}{{ end }}"
              data-price="{{ .BasePrice }}"
              data-tax="{{ with .TaxCodeID }}{{ . }}{{ end }}">
            <td class="catalog-thumb-cell"><img class="thumb small" src="{{ imgv (printf "/public/assets/items/%s/thumb.png" .ID) }}" alt="" loading="lazy" onerror="this.style.visibility='hidden'"></td>
            <td class="catalog-name">{{ .Name }}</td>
            <td class="muted">{{ .SKU }}</td>
            <td>{{ money .BasePrice }}</td>
            <td>{{ if .Unit }}{{ .Unit }}{{ else }}each{{ end }}{{ if .IsWeighed }} ⚖{{ end }}</td>
            <td>{{ with .TaxCodeID }}{{ . }}{{ else }}—{{ end }}</td>
            <td class="btn-actions">
              <button class="btn secondary catalog-edit" type="button">{{ T "common.edit" }}</button>
              <button class="btn danger" type="button"
                      hx-post="/api/catalog/item/deactivate"
                      hx-vals='{"id":"{{ .ID }}"}'
                      hx-confirm="Deactivate {{ .Name }}?"
                      hx-target="#catalog-table" hx-swap="outerHTML">✕</button>
            </td>
          </tr>
        {{ end }}
      {{ else }}
        <tr><td colspan="7" class="empty">{{ T "basket.empty" }}</td></tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}