{{ 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 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 }}