{{ define "subscription_plans" }}
{{ if not .HideBilling }}
{{ if not .Tiers }}
{{/* Billing is enabled (HideBilling=false) but no tiers were returned —
     covers the config-loaded-but-empty case. Explicit copy beats silent render. */}}
<section class="card bg-base-200 shadow-sm p-6">
    <h3 class="text-xl font-semibold">Available Plans</h3>
    <p class="text-sm text-base-content/70 mt-2">Plan information is temporarily unavailable. Check back in a minute.</p>
</section>
{{ else }}
<section class="card bg-base-200 shadow-sm p-6 space-y-4">
    <h3 class="text-xl font-semibold">Available Plans</h3>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4">
        {{ range .Tiers }}
        <div class="border rounded-lg p-5 bg-base-200 relative flex flex-col{{ if .IsCurrent }} border-primary border-2{{ else }} border-base-300{{ end }}">
            {{ if .IsCurrent }}<span class="badge badge-primary badge-sm absolute -top-2 right-4">Current</span>{{ end }}
            <div class="text-lg font-bold capitalize">{{ .Name }}</div>
            {{ if .Description }}<p class="text-sm text-base-content/60 mt-1">{{ .Description }}</p>{{ end }}
            {{ if .Features }}
            <ul class="text-sm text-base-content/60 mt-2 list-disc list-inside space-y-0.5">
                {{ range .Features }}<li>{{ . }}</li>{{ end }}
            </ul>
            {{ end }}
            <div class="flex-1"></div>
            <div class="mt-4">
                {{ if and .IsCurrent (not $.SubscriptionID) (or .PriceCentsMonthly .PriceCentsYearly) }}
                    {{/* Current tier with optional support pricing */}}
                    <div class="text-2xl font-bold text-success">Free</div>
                    {{ if .PriceMonthly }}<div class="text-sm text-base-content/60">{{ .PriceMonthly }} to support</div>
                    {{ else if .PriceYearly }}<div class="text-sm text-base-content/60">{{ .PriceYearly }} to support</div>{{ end }}
                {{ else if .PriceMonthly }}
                    <div class="text-2xl font-bold">{{ .PriceMonthly }}</div>
                    {{ if .PriceYearly }}<div class="text-sm text-base-content/60">or {{ .PriceYearly }}</div>{{ end }}
                {{ else if .PriceYearly }}
                    <div class="text-2xl font-bold">{{ .PriceYearly }}</div>
                {{ else }}
                    <div class="text-2xl font-bold text-success">Free</div>
                {{ end }}
            </div>
            {{ if not .IsCurrent }}
                {{ if or .PriceCentsMonthly .PriceCentsYearly }}
                    {{ if $.SubscriptionID }}
                    <a href="/settings/subscription/portal" class="btn btn-primary w-full mt-3">Change Plan</a>
                    {{ else }}
                    <a href="/settings/subscription/checkout?tier={{ .ID }}" class="btn btn-primary w-full mt-3">Upgrade</a>
                    {{ end }}
                {{ end }}
            {{ else if and (not $.SubscriptionID) (or .PriceCentsMonthly .PriceCentsYearly) }}
                <a href="/settings/subscription/checkout?tier={{ .ID }}" class="btn btn-outline btn-primary w-full mt-3">Become a Supporter</a>
            {{ end }}
        </div>
        {{ end }}
    </div>
    {{ if .SubscriptionID }}
    <div class="flex justify-end">
        <a href="/settings/subscription/portal" class="btn btn-outline btn-primary btn-sm">Manage Billing</a>
    </div>
    {{ end }}
</section>
{{ end }}
{{ end }}
{{ end }}