{{- /* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Commercial */ -}}
{{- /* SPDX-FileCopyrightText: 2025-2026 Christian Galo */ -}}

{{/* member_addons.html
     The Products page's non-plan catalog. Titles itself ("More products"
     beneath plan sections, "Products" standing alone) and renders
     nothing when no purchasable product exists, so the page shows no
     empty chrome. Every row can be bought: a product without an active,
     synced, recurring price is not listed (buildAddonsData; maintainer,
     2026-09-19), so no row carries text where its Add would be. Category
     chips render through statusBadge. */}}
{{ 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 }}
{{ template "sectionHeader" .Header }}
{{ if .HasPlans }}
<p class="text-muted small mb-2">Products to add alongside your plan, or to use on their own.</p>
{{ end }}
<div class="table-responsive">
  <table class="table table-hover table-sm table-record align-middle">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th class="text-end"><span class="visually-hidden">Actions</span></th>
      </tr>
    </thead>
    <tbody>
      {{ range .Addons }}
      <tr>
        <th scope="row">
          {{ .Name }}
          {{ if .DisplayCategory }} {{ template "statusBadge" .CategoryBadge }}{{ end }}
        </th>
        <td class="text-muted">{{ .Description }}</td>
        <td class="text-end">
          {{/* 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 ms-1"
            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>
        </td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}