{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .Addons) 0 }}
<!-- No qualifying products: render nothing so the section is hidden -->
{{ else }}
{{ if .HasPlans }}
<!-- Beneath plan sections this is the rest of the catalog; standing alone
     (no plans configured) it IS the catalog, so no subordinate framing. -->
<h2 class="text-muted mb-1 h6">More products</h2>
<p class="text-muted small mb-3">Products you can add alongside your plan, or use on their own.</p>
{{ else }}
<h2 class="text-muted mb-3 h6">Products</h2>
{{ end }}
<div class="table-responsive">
  <table class="table table-sm">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{ range .Addons }}
      <tr>
        <td class="fw-semibold">
          {{ .Name }}
          {{ if .DisplayCategory }}<span class="badge bg-secondary">{{ .DisplayCategory }}</span>{{ end }}
        </td>
        <td class="text-muted">{{ .Description }}</td>
        <td>
          {{ if .Purchasable }}
          <!-- chrome-conventions D2 (one dominant primary action per screen):
               each addon row is a parallel, equal-weight purchase option, so
               none of them carries the filled primary style. -->
          <button type="button" class="btn btn-outline-primary btn-sm"
            hx-post="/billing/checkout" hx-vals='{"price_id": "{{ .PriceID }}"}'
            hx-target="#addon-checkout-error-{{ .ProductID }}" hx-swap="innerHTML">Add</button>
          <div id="addon-checkout-error-{{ .ProductID }}" class="small text-danger mt-1"></div>
          {{ else }}
          <small class="text-muted">Not available for purchase</small>
          {{ end }}
        </td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}