{{ define "repo-tag-section" }}
<div id="tag-content" data-owner="{{ .Owner.Handle }}" data-repo="{{ .Repository.Name }}"{{ if .SelectedTag }} data-digest="{{ if and .SelectedTag.Info.IsMultiArch .SelectedTag.Info.Platforms }}{{ (index .SelectedTag.Info.Platforms 0).Digest }}{{ else }}{{ .SelectedTag.Info.Digest }}{{ end }}"{{ end }}>
    {{ if .SelectedTag }}
    {{/* Tag-scoped badges (platform / attested). These live INSIDE the
         HTMX-swapped section so they re-render on each tag change.
         Putting them in pages/repository.html freezes them at page load. */}}
    <div class="flex flex-wrap items-center gap-2 mb-2 min-h-6">
        {{ if .SelectedTag.Info.IsMultiArch }}
            {{ range .SelectedTag.Info.Platforms }}
                <span class="badge badge-sm badge-outline font-mono">{{ .OS }}/{{ .Architecture }}{{ if .Variant }}/{{ .Variant }}{{ end }}</span>
            {{ end }}
            <span class="badge badge-sm badge-soft badge-accent">Multi-arch</span>
        {{ else if gt (len .SelectedTag.Info.Platforms) 0 }}
            {{ $p := index .SelectedTag.Info.Platforms 0 }}
            {{ if $p.OS }}
                <span class="badge badge-sm badge-outline font-mono">{{ $p.OS }}/{{ $p.Architecture }}{{ if $p.Variant }}/{{ $p.Variant }}{{ end }}</span>
            {{ end }}
        {{ end }}
        {{ if eq .ArtifactType "helm-chart" }}
            <span class="badge badge-sm badge-soft badge-helm">{{ icon "helm" "size-3" }} Helm</span>
        {{ end }}
        {{ if .SelectedTag.Info.HasAttestations }}
            <button class="badge badge-sm badge-soft badge-success cursor-pointer hover:opacity-80"
                    hx-get="/api/attestation-details?digest={{ .SelectedTag.Info.Digest | urlquery }}&did={{ .Owner.DID | urlquery }}&repo={{ .Repository.Name | urlquery }}"
                    hx-target="#attestation-modal-body"
                    hx-swap="innerHTML"
                    data-action="show-modal" data-modal-id="attestation-detail-modal">
                {{ icon "shield-check" "size-3" }} Attested
            </button>
        {{ end }}
    </div>
    <!-- Pull Command with Client Switcher -->
    {{ template "pull-command-switcher" (dict "RegistryURL" .RegistryURL "OwnerHandle" .Owner.Handle "RepoName" .Repository.Name "Tag" .SelectedTag.Info.Tag.Tag "ArtifactType" .ArtifactType "OciClient" .OciClient "IsLoggedIn" (ne .User nil)) }}

    {{ if .NonDefaultHolds }}
    <!-- Informational badge: this repo has content on a hold other than the viewer's default -->
    <div class="mt-2 flex flex-wrap gap-2 items-center text-xs text-base-content/70">
        <span>Hosted on:</span>
        {{ range .NonDefaultHolds }}
        <span class="badge badge-outline badge-sm max-w-32 truncate" title="{{ . }}">{{ displayHoldDID . }}</span>
        {{ end }}
        <span class="text-base-content/70">(not your default hold)</span>
    </div>
    {{ end }}

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
        <!-- Size & Layers -->
        <div class="card bg-base-200 border border-base-300 p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs font-semibold uppercase tracking-wider text-base-content/70">Image Size</span>
                <span class="text-xs font-semibold uppercase tracking-wider text-base-content/70">Layers</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-lg font-bold">{{ humanizeBytes .SelectedTag.CompressedSize }}</span>
                <span class="text-lg font-bold">{{ .SelectedTag.LayerCount }}</span>
            </div>
            <div class="text-xs text-base-content/70 mt-1">
                Pushed {{ timeAgoShort .SelectedTag.Info.CreatedAt }}
            </div>
        </div>

        <!-- Vulnerabilities (first platform only for summary) -->
        <div class="card bg-base-200 border border-base-300 p-4">
            <div class="text-xs font-semibold uppercase tracking-wider text-base-content/70 mb-2">Vulnerabilities</div>
            <div id="vuln-summary-card">
                {{ if .SelectedTag.Info.Platforms }}
                {{ $firstPlatform := index .SelectedTag.Info.Platforms 0 }}
                <span id="scan-badge-{{ trimPrefix "sha256:" $firstPlatform.Digest }}"></span>
                <span id="vuln-loading-text" class="text-sm text-base-content/70">Loading...</span>
                {{ end }}
            </div>
        </div>

        <!-- Pulls -->
        <div class="card bg-base-200 border border-base-300 p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs font-semibold uppercase tracking-wider text-base-content/70">Pulls</span>
            </div>
            <div class="text-lg font-bold">{{ .Stats.PullCount }} <span class="text-sm font-normal text-base-content/70">total</span></div>
            <div class="text-xs text-base-content/70 mt-1">
                {{ if .Stats.LastPull }}Last pull {{ timeAgoShort (derefTime .Stats.LastPull) }}{{ else }}No pulls yet{{ end }}
            </div>
        </div>
    </div>

    <!-- Scan batch triggers for selected tag -->
    {{ range .SelectedTag.ScanBatchParams }}
    <div hx-get="/api/scan-results?{{ . }}"
         hx-trigger="load delay:500ms"
         hx-swap="none"
         hx-on::after-request="var el=document.getElementById('vuln-loading-text');if(el)el.remove()"
         style="display:none"></div>
    {{ end }}

    {{ else }}
    <!-- No tags exist -->
    {{ template "state-empty" (dict
        "Icon" "tag"
        "Title" "No tags yet"
        "Subtext" "Push an image to this repository and its tags will appear here."
    ) }}
    {{ end }}

    <!-- Tab Navigation -->
    <div class="border-b border-base-300 mt-6">
        <nav class="flex gap-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" role="tablist" aria-label="Repository sections">
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="overview"
                    role="tab"
                    aria-selected="true"
                    aria-controls="tab-overview"
                    id="overview-tab-btn"
                    data-action="switch-repo-tab">
                Overview
            </button>
            {{ if .SelectedTag }}
            {{ if eq .ArtifactType "helm-chart" }}
            {{/* Helm charts: a single Chart tab replaces Layers/Vulns/SBOM —
                 those concepts don't apply. */}}
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="chart"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-chart"
                    id="chart-tab-btn"
                    data-action="switch-repo-tab">
                Chart
            </button>
            {{ else }}
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="layers"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-layers"
                    id="layers-tab-btn"
                    data-action="switch-repo-tab">
                Layers
            </button>
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="vulns"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-vulns"
                    id="vulns-tab-btn"
                    data-action="switch-repo-tab">
                Vulnerabilities
            </button>
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="sbom"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-sbom"
                    id="sbom-tab-btn"
                    data-action="switch-repo-tab">
                SBOM
            </button>
            {{ end }}
            {{ end }}
            <button class="repo-tab shrink-0 whitespace-nowrap px-4 sm:px-6 py-3 text-sm font-medium border-b-2 border-transparent text-base-content/60 transition-colors cursor-pointer"
                    data-tab="artifacts"
                    role="tab"
                    aria-selected="false"
                    aria-controls="tab-artifacts"
                    id="artifacts-tab-btn"
                    data-action="switch-repo-tab">
                Artifacts
            </button>
        </nav>
    </div>

    <!-- Tab Panels -->
    <div id="tab-overview" class="repo-panel" role="tabpanel" aria-labelledby="overview-tab-btn" tabindex="0">
        <div id="overview-view" class="space-y-4 min-w-0 pt-6">
            {{ if .SelectedTag }}
            {{/* Deprecation leads the Overview panel, above the README, for the
                 same reason it leads the metadata card on the Chart tab: it
                 decides whether you should use the chart at all, so it has to
                 be read before the prose that sells it. Overview is the tab
                 people land on, so it can't be the one surface that stays
                 silent, and a warning has to be in the first paint rather than
                 arriving a beat later.

                 Server-rendered from .SelectedTag.HelmMeta, which the handler
                 fetches from the hold only for helm charts. It is nil for a
                 container image and nil when the hold could not answer, and
                 the shared block renders nothing at all for nil or for a chart
                 that isn't deprecated, so no element enters the panel's
                 space-y-4 rhythm in those cases. */}}
            {{ template "helm-deprecation-notice" .SelectedTag.HelmMeta }}
            {{ end }}

            {{ if and .AIAdvisorEnabled .User .IsOwner .SelectedTag }}
            <div id="ai-advisor-section">
                <button id="ai-advisor-btn" class="btn btn-sm btn-outline gap-1"
                        hx-get="/api/image-advisor/{{ .Owner.Handle }}/{{ .Repository.Name }}?digest={{ if and .SelectedTag.Info.IsMultiArch .SelectedTag.Info.Platforms }}{{ (index .SelectedTag.Info.Platforms 0).Digest }}{{ else }}{{ .SelectedTag.Info.Digest }}{{ end }}"
                        hx-target="#ai-advisor-results"
                        hx-swap="innerHTML"
                        hx-indicator="#ai-advisor-spinner"
                        hx-on::after-request="if(event.detail.successful){this.disabled=true}">
                    {{ icon "sparkles" "size-4" }}
                    Analyze Image
                </button>
                <span id="ai-advisor-spinner" class="htmx-indicator">
                    {{ icon "loader" "size-4 animate-spin" }}
                </span>
                <div id="ai-advisor-results" class="mt-4" role="status" aria-live="polite"></div>
            </div>
            {{ end }}

            {{ if and .IsOwner .ReadmeHTML }}
            <div class="flex justify-end">
                <button class="btn btn-sm btn-ghost gap-1" data-action="toggle-editor" data-show="true">
                    {{ icon "pencil" "size-4" }}
                    Edit
                </button>
            </div>
            {{ end }}

            <div id="overview-rendered" class="prose prose-sm max-w-none">
                {{ if .ReadmeHTML }}
                    {{ .ReadmeHTML }}
                {{ else if .ReadmeFetchFailed }}
                    {{/* README URL is configured but the fetch failed — distinguish
                         from "no README yet" so owners know the source is broken,
                         not missing. */}}
                    <div class="text-center py-12">
                        {{ icon "alert-triangle" "size-12 text-warning mx-auto" }}
                        <p class="text-base-content/70 mt-4">We couldn't load the README</p>
                        <p class="text-base-content/60 text-sm mt-1">The configured README source didn't respond. It may be rate-limited or private.</p>
                        {{ if .IsOwner }}
                        <button class="btn btn-outline btn-sm mt-4" data-action="toggle-editor" data-show="true">
                            {{ icon "pencil" "size-4" }} Edit README
                        </button>
                        {{ end }}
                    </div>
                {{ else }}
                    {{ if .IsOwner }}
                    <div class="text-center py-12">
                        {{ icon "file-text" "size-12 text-base-content/40 mx-auto" }}
                        <p class="text-base-content/60 mt-4">No README provided</p>
                        <p class="text-base-content/70 text-sm mt-1">Add a README to help users understand this image.</p>
                        <button class="btn btn-primary btn-sm mt-4" data-action="toggle-editor" data-show="true">
                            {{ icon "pencil" "size-4" }} Add README
                        </button>
                    </div>
                    {{ else }}
                    <div class="text-center py-12">
                        {{ icon "file-text" "size-12 text-base-content/40 mx-auto" }}
                        <p class="text-base-content/60 mt-4">No README provided</p>
                        <p class="text-base-content/70 text-sm mt-1">Image metadata is shown above.</p>
                    </div>
                    {{ end }}
                {{ end }}
            </div>
        </div>
    </div>

    {{ if .SelectedTag }}
    {{ if eq .ArtifactType "helm-chart" }}
    <div id="tab-chart" class="repo-panel hidden" role="tabpanel" aria-labelledby="chart-tab-btn" tabindex="0">
        <div id="chart-content">
            <div class="flex justify-center py-12">
                <span class="loading loading-spinner loading-lg"></span>
            </div>
        </div>
    </div>
    {{ else }}
    <div id="tab-layers" class="repo-panel hidden" role="tabpanel" aria-labelledby="layers-tab-btn" tabindex="0">
        <div id="layers-content">
            <div class="flex justify-center py-12">
                <span class="loading loading-spinner loading-lg"></span>
            </div>
        </div>
    </div>

    <div id="tab-vulns" class="repo-panel hidden" role="tabpanel" aria-labelledby="vulns-tab-btn" tabindex="0">
        <div id="vulns-content">
            <div class="flex justify-center py-12">
                <span class="loading loading-spinner loading-lg"></span>
            </div>
        </div>
    </div>

    <div id="tab-sbom" class="repo-panel hidden" role="tabpanel" aria-labelledby="sbom-tab-btn" tabindex="0">
        <div id="sbom-content">
            <div class="flex justify-center py-12">
                <span class="loading loading-spinner loading-lg"></span>
            </div>
        </div>
    </div>
    {{ end }}
    {{ end }}

    <div id="tab-artifacts" class="repo-panel hidden" role="tabpanel" aria-labelledby="artifacts-tab-btn" tabindex="0">
        <div id="artifacts-content">
            <div class="flex justify-center py-12">
                <span class="loading loading-spinner loading-lg"></span>
            </div>
        </div>
    </div>
</div>
{{ end }}