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

{{/* member_plans.html
     The Products page's Plans region: one bordered group per ladder,
     tier cards inside, the switch preview banner, and the plan cancel
     (through the shared confirm modal; design-system.md §3 bans
     hx-confirm). Badges render through statusBadge; the cancel chip
     carries the date itself, which is the fact a member needs. */}}
{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .Ladders) 0 }}
{{ template "emptyState" .Empty }}
{{ else }}
{{ if .Success }}
<div class="alert alert-success" role="alert">
  {{ .Success }}
</div>
{{ end }}
{{ if .Preview }}
{{ template "form" .Preview }}
{{ end }}
{{ range .Ladders }}
<div class="border-start border-3 ps-3 mb-4{{ if .Enrolled }} border-primary{{ else }} border-secondary-subtle{{ end }}">
  <h3 class="fw-bold mb-3 h6{{ if not .Enrolled }} text-muted{{ end }}">
    {{ .Name }}
    {{ if .CancelsOn }} {{ template "statusBadge" .CancelBadge }}{{ end }}
  </h3>
  <div class="row row-cols-1 row-cols-md-3 g-3">
    {{ range .Tiers }}
    <div class="col">
      <div class="card h-100{{ if eq .Relation "current" }} border-primary{{ end }}">
        <div class="card-body d-flex flex-column">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <h4 class="card-title mb-0 h6">{{ .Name }}</h4>
            {{ if eq .Relation "current" }}{{ template "statusBadge" .CurrentBadge }}{{ end }}
          </div>
          {{/* Every card states its cost, not only the current tier's
               (member-product-discovery: "Every plan card states its
               cost", ACC-7): the current tier shows what the org is
               actually billed; every other tier shows its own list price
               and interval when it has an active synced price, "Included"
               when it carries no price at all (the free rung), or nothing
               when its price exists but isn't synced yet (the
               purchasability gate already disables its move control with
               a visible reason below). */}}
          {{ if eq .Relation "current" }}
          {{ if .BillingPending }}
          <p class="text-muted small mb-2">Billing details are still being processed.</p>
          {{ else if .BillingPriceText }}
          <p class="text-muted small mb-2">{{ .BillingPriceText }}, renews {{ .BillingRenewsOn }}</p>
          {{ end }}
          {{ else if .NoPriceTier }}
          <p class="text-muted small mb-2">Included</p>
          {{ else if .PriceText }}
          <p class="text-muted small mb-2">{{ .PriceText }}</p>
          {{ end }}
          {{ if .Description }}<p class="card-text text-muted small mb-3">{{ .Description }}</p>{{ end }}
          <ul class="list-unstyled small mb-3 flex-grow-1">
            {{ range .EntitlementFeatures }}
            <li class="mb-1">&middot; {{ . }}</li>
            {{ end }}
            {{ range .MetadataFeatures }}
            <li class="mb-1">&middot; {{ . }}</li>
            {{ end }}
          </ul>
          {{ if ne .Relation "current" }}
          {{ if .MoveKind }}
          {{ if .MoveEnabled }}
          {{/* chrome-conventions D2 (one dominant primary action per screen):
               every purchasable tier across every ladder is a parallel,
               equal-weight option, so none carries the filled primary
               style; only the switch-preview banner's "Confirm switch"
               (above) is a genuine single dominant action, when shown. */}}
          {{ if eq .MoveKind "checkout" }}
          <button type="button" class="btn btn-outline-primary btn-sm w-100 mt-auto"
            hx-post="/billing/checkout" hx-vals='{"price_id": "{{ .PriceID }}"}'
            hx-target="#checkout-error-{{ .MoveLadderID }}-{{ .ProductID }}" hx-swap="innerHTML">{{ .MoveLabel }}</button>
          <div id="checkout-error-{{ .MoveLadderID }}-{{ .ProductID }}" class="small text-danger mt-1"></div>
          {{ else if eq .MoveKind "switch" }}
          <button type="button" class="btn btn-outline-primary btn-sm w-100 mt-auto"
            hx-get="/partials/member/plans/switch/preview" hx-vals='{"ladder_id": "{{ .MoveLadderID }}", "price_id": "{{ .PriceID }}"}'
            hx-target="#member-plans" hx-swap="innerHTML">{{ .MoveLabel }}</button>
          {{ else if eq .MoveKind "cancel" }}
          <button type="button" class="btn btn-outline-secondary btn-sm w-100 mt-auto"
            data-bs-toggle="modal"
            data-bs-target="#confirmActionModal"
            data-action-url="/partials/member/plans/cancel"
            data-action-method="post"
            data-action-target="#member-plans"
            data-action-title="Cancel plan"
            data-action-body="Cancel this plan? You'll keep access until the end of your current billing period, then return to the free plan."
            data-action-confirm-label="Cancel plan"
            data-action-style="warning"
            data-action-fields='{"ladder_id": "{{ .MoveLadderID }}"}'>{{ .MoveLabel }}</button>
          {{ end }}
          {{ else }}
          {{ template "disabledControl" .DisabledControl }}
          {{ end }}
          {{ end }}
          {{ end }}
        </div>
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}
{{ end }}