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

{{/* operator_plan_ladder_tiers.html
     The composite's Add tier and Tiers sections, titled by sectionHeader
     outside their boxes. Add tier is a closed panel opened from the
     section header (design D20 "Create flows: a closed panel, then land on
     the record"), rendering the declaration operator.plan-ladder.tier.add
     (form-library); the dense form is already its own box (design D10), so
     nothing wraps it here. The tier rows drag-to-reorder (SortableJS);
     drops render a server-side preview and nothing is saved until the
     operator commits, so the pending panels render the preview
     declarations operator.plan-ladder.tier.reorder.commit and .remove.commit
     (design D10's preview idiom; finding FA-13). Product names cross-link
     to their products (chrome-conventions: cross-refs link identifiers). */}}
{{ if .Error }}
<div class="alert alert-danger" role="alert">{{ .Error }}</div>
{{ end }}

{{ template "sectionHeader" .TiersHeader }}
<div class="collapse{{ if .TierForm.HasErrors }} show{{ end }} mb-3" id="tierAddPanel">
    {{ if gt (len .AvailableProducts) 0 }}
    {{ template "form" .TierForm }}
    {{/* Page prose, not a field hint: it explains the drag-to-reorder
         gesture on the table below, not the product control itself. */}}
    <p class="text-muted small mb-0">New tiers are added at the highest rank; drag rows below to set the order.</p>
    {{ else }}
    <p class="text-muted small mb-0">No plan products are available to add. Every published product is already a tier on this ladder, or no products are published yet.</p>
    {{ end }}
</div>

{{ if eq (len .Tiers) 0 }}
{{ template "emptyState" .NoTiers }}
{{ else }}
{{ $pending := .Pending }}
{{ $removal := .RemovalPending }}
{{ $rows := .Tiers }}{{ if $pending }}{{ $rows = $pending.Order }}{{ end }}
{{ if gt (len $rows) 1 }}
<p class="text-muted small mb-2">Drag a row by its handle (&#x28FF;) to reorder tiers; dropping shows a preview, and nothing is saved until you commit. Rank&nbsp;0 is the base tier, listed first below; when a ladder is an org type's default plan, its rank-0 tier is what new organizations of that type start on.</p>
{{ else }}
<p class="text-muted small mb-2">Rank&nbsp;0 is the base tier; when a ladder is an org type's default plan, its rank-0 tier is what new organizations of that type start on.</p>
{{ end }}
{{/* design D8 / plan-ladder-management "The tiers table reads as a record
     table": the tier's product name is the primary column (row header),
     with a styled header row (table-record, lane A). */}}
<div class="table-responsive">
    <table class="table table-hover table-sm table-record align-middle">
        <thead>
            <tr>
                <th>Product</th>
                <th>Rank</th>
                <th>Active positions</th>
                <th class="text-end"><span class="visually-hidden">Actions</span></th>
            </tr>
        </thead>
        <tbody data-sortable
               data-sortable-direction="vertical"
               data-sortable-draggable="tr"
               data-sortable-handle=".sortable-handle"
               hx-post="{{ routeURL "/partials/operator/plan-ladders/{ladderID}/tiers/reorder/preview" .Ladder.PlanLadderID }}"
               hx-trigger="end"
               hx-target="#operator-body"
               hx-swap="innerHTML"
               hx-include="this">
            {{ range $rows }}
            <tr>
                <th scope="row">
                    <input type="hidden" name="product" value="{{ .ProductID }}">
                    {{/* operator-topology-overview "One ladder has no
                         handle" applies the same way to tier rows: a
                         handle to reorder among siblings means nothing
                         with only one tier. */}}
                    {{ if gt (len $rows) 1 }}
                    <span class="sortable-handle text-muted me-2" role="button" tabindex="-1" title="Drag to reorder" aria-label="Drag to reorder {{ .ProductName }}">&#x28FF;</span>
                    {{ end }}
                    <a href="{{ routeURL "/operator/products/{productID}" .ProductID }}">{{ .ProductName }}</a>
                    {{ if eq .Rank 0 }}{{ range $.DefaultBadges }} {{ template "statusBadge" . }}{{ end }}{{ end }}
                </th>
                <td>{{ if $pending }}{{ template "statusBadge" .PendingRankBadge }}{{ else }}{{ template "statusBadge" .RankBadge }}{{ end }}</td>
                <td>{{ if .HasActiveAttachments }}{{ .ActiveAttachmentCount }}{{ else }}<span class="text-muted">0</span>{{ end }}</td>
                <td class="text-end">
                    {{ if or $pending $removal }}
                    {{/* A pending reorder or removal preview owns the table:
                         no verb until it is committed or discarded, and the
                         pending panel below the table says so, so the cell
                         is empty rather than a marker with a hover title
                         (chrome-conventions "A verb-less row leaves its
                         Actions cell empty"; design D23 keeps tooltips for
                         disabled controls only). */}}
                    {{ else if .HasActiveAttachments }}
                    <button type="button" class="btn btn-outline-danger btn-sm ms-1"
                            hx-post="{{ routeURL "/partials/operator/plan-ladders/{ladderID}/tiers/{productID}/remove/preview" .PlanLadderID .ProductID }}"
                            hx-target="#operator-body" hx-swap="innerHTML"
                            title="{{ .ActiveAttachmentCount }} pool(s) hold this tier. Removing shows what happens to each before anything changes.">
                        Preview removal
                    </button>
                    {{ else }}
                    <button type="button" class="btn btn-outline-danger btn-sm ms-1"
                            data-bs-toggle="modal"
                            data-bs-target="#confirmActionModal"
                            data-action-url="{{ routeURL "/partials/operator/plan-ladders/{ladderID}/tiers/{productID}" .PlanLadderID .ProductID }}"
                            data-action-method="delete"
                            data-action-target="#operator-body"
                            data-action-title="Remove tier"
                            data-action-body="Remove tier '{{ .ProductName }}' from this ladder? Remaining tiers renumber to stay contiguous{{ if and (eq .Rank 0) $.DefaultForOrgTypeNames }}. It's the rank-0 tier of a default plan, so the next tier becomes what new organizations start on{{ end }}."
                            data-action-confirm-label="Remove tier">
                        Remove
                    </button>
                    {{ end }}
                </td>
            </tr>
            {{ end }}
        </tbody>
    </table>
</div>

{{ with .Pending }}
{{ template "form" .Form }}
{{ end }}

{{ with .RemovalPending }}
{{ template "form" .Form }}
{{ end }}
{{ end }}