{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .Addons) 0 }}
<!-- No add-ons: render nothing so section is hidden -->
{{ else }}
<h2 class="text-muted mb-1 h6">Add-ons</h2>
<p class="text-muted small mb-3">Add-ons stack alongside any plan — they are not part of a plan ladder and can be added on top of your current tier.</p>
<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 }}</td>
        <td class="text-muted">{{ .Description }}</td>
        <td>
          {{ if .Purchasable }}
          <button type="button" class="btn btn-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 }}
          <button class="btn btn-secondary btn-sm opacity-50" disabled title="Not available yet">Add</button>
          <small class="text-muted d-block mt-1">Not available yet</small>
          {{ end }}
        </td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}