{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .Ladders) 0 }}
<div class="text-center py-3">
  <p class="text-muted mb-0">No plans available.</p>
</div>
{{ else }}
{{ if .Success }}
<div class="alert alert-success" role="alert">
  {{ .Success }}
</div>
{{ end }}
{{ if .Preview }}
<div class="alert alert-info" role="alert">
  <p class="mb-2"><strong>Switch to {{ .Preview.TierName }}?</strong></p>
  {{ if .Preview.Available }}
    {{ if .Preview.IsCredit }}
    <p class="mb-1">You'll receive an estimated credit of {{ .Preview.AmountText }} for the unused part of your current plan, then be billed the new rate going forward.</p>
    {{ else }}
    <p class="mb-1">You'll be charged an estimated {{ .Preview.AmountText }} now for the prorated difference, then the new rate going forward.</p>
    {{ end }}
    <p class="text-muted small mb-2">This is an estimate; the invoice Stripe issues is the final amount.</p>
  {{ else }}
    <p class="mb-2">You'll be charged or credited the prorated difference for the change, then billed the new rate going forward.</p>
  {{ end }}
  <div class="d-flex gap-2">
    <button type="button" class="btn btn-primary btn-sm"
      hx-post="/partials/member/plans/switch" hx-vals='{"ladder_id": "{{ .Preview.LadderID }}", "price_id": "{{ .Preview.PriceID }}"}'
      hx-target="#member-plans" hx-swap="innerHTML">Confirm switch</button>
    <button type="button" class="btn btn-outline-secondary btn-sm"
      hx-get="/partials/member/plans" hx-target="#member-plans" hx-swap="innerHTML">Keep current plan</button>
  </div>
</div>
{{ 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 }}<span class="badge bg-warning text-dark ms-2">Cancels on {{ .CancelsOn }}</span>{{ 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" }}<span class="badge bg-primary">Current plan</span>{{ end }}
          </div>
          {{ 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 }}
          {{ 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 .MoveEnabled }}
          {{ if eq .MoveKind "checkout" }}
          <button type="button" class="btn btn-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-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"
            hx-post="/partials/member/plans/cancel" hx-vals='{"ladder_id": "{{ .MoveLadderID }}"}'
            hx-target="#member-plans" hx-swap="innerHTML"
            hx-confirm="Cancel this plan? You'll keep access until the end of your current billing period, then return to the free tier.">{{ .MoveLabel }}</button>
          {{ end }}
          {{ else }}
          <button class="btn btn-secondary btn-sm w-100 mt-auto opacity-50" disabled title="{{ .DisabledReason }}">{{ .MoveLabel }}</button>
          <small class="text-muted d-block mt-1">{{ .DisabledReason }}</small>
          {{ end }}
          {{ end }}
        </div>
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}
{{ end }}