{{ define "settings-panel-storage" }}
{{ if .SelfHostedActivePlan }}
<div role="alert" class="alert alert-warning mb-4">
    {{ icon "alert-triangle" "size-5 shrink-0" }}
    <div>
        <p class="font-medium">You're on a self-hosted hold but still have an active plan</p>
        <p class="text-sm">Paid features apply only on managed holds, so your plan is currently inactive. You can manage or cancel it anytime.</p>
    </div>
    <a class="btn btn-sm" href="/settings/subscription/portal">Manage plan</a>
</div>
{{ else if .SelfHostedHold }}
<div class="alert mb-4">
    {{ icon "server" "size-5 shrink-0" }}
    <span>You're on a self-hosted hold, so there's nothing to bill. Paid features apply on managed holds.</span>
</div>
{{ end }}
{{ if or .MemberHolds .EligibleHolds }}
<div class="grid grid-cols-1 {{ if .OtherHolds }}lg:grid-cols-2{{ end }} gap-4">
    <div class="space-y-4">
        {{ template "hold_selector" . }}
        {{ if .ActiveHold }}
            {{ template "hold_card" .ActiveHold }}
        {{ else }}
        <div class="card bg-base-200 shadow-sm p-6 text-center text-base-content/60">
            No active hold selected. Choose one above.
        </div>
        {{ end }}
    </div>
    {{ if .OtherHolds }}
    <div>
        {{ template "other_holds_table" .OtherHolds }}
    </div>
    {{ end }}
</div>
{{ else }}
<div class="card bg-base-200 shadow-sm">
    {{ template "state-empty" (dict
        "Icon" "anchor"
        "Title" "No holds configured"
        "Subtext" "Push an image to atcr.io and your first hold will appear here."
    ) }}
</div>
{{ end }}

<section class="card bg-base-200 shadow-sm p-6 space-y-4">
    <h2 class="text-xl font-semibold">Storage Preferences</h2>
    <label class="flex items-start gap-3 cursor-pointer">
        <input type="checkbox" class="toggle toggle-primary mt-0.5"
               hx-post="/api/profile/auto-remove-untagged"
               hx-trigger="change"
               hx-swap="none"
               {{ if .Profile.AutoRemoveUntagged }}checked{{ end }}>
        <div>
            <span class="font-medium">Automatically remove untagged manifests</span>
            <p class="text-sm text-base-content/60 mt-1">
                When a tag is overwritten, the old manifest and its layers are cleaned up.
                Multi-arch child manifests are preserved.
            </p>
        </div>
    </label>
</section>
{{ end }}