{{ define "vuln-details" }}
{{ if .NotScanned }}
    <div class="py-8 text-sm text-base-content/70 max-w-prose">
        <p class="font-medium text-base-content">No vulnerability scan available yet</p>
        <p class="mt-1">Scans run automatically shortly after a push. Check back in a few minutes, or push a new tag to trigger a scan.</p>
    </div>
{{ else if .VulnsNotScanned }}
    <div class="py-8 text-sm text-base-content/70 max-w-prose">
        <p class="font-medium text-base-content">Vulnerability scanning did not run for this image</p>
        <p class="mt-1">The scanner catalogued the image contents, so an SBOM is available, but it was never matched against a vulnerability database. No result here means no data, not a clean bill of health.</p>
        {{ if .ScannedAt }}<p class="mt-2 text-xs text-base-content/60">Scanned: {{ .ScannedAt }}</p>{{ end }}
    </div>
{{ else if .Error }}
    {{ if gt .Summary.Total 0 }}
    <!-- Summary available but no detailed report -->
    <div class="space-y-4">
        <span class="vuln-strip" role="group" aria-label="Vulnerability summary by severity">
            <span class="tooltip vuln-box-critical" data-tip="Critical" aria-label="{{ .Summary.Critical }} critical">{{ .Summary.Critical }}</span>
            <span class="tooltip vuln-box-high" data-tip="High" aria-label="{{ .Summary.High }} high">{{ .Summary.High }}</span>
            <span class="tooltip vuln-box-medium" data-tip="Medium" aria-label="{{ .Summary.Medium }} medium">{{ .Summary.Medium }}</span>
            <span class="tooltip vuln-box-low" data-tip="Low" aria-label="{{ .Summary.Low }} low">{{ .Summary.Low }}</span>
        </span>
        <p class="text-sm">{{ .Error }}</p>
        {{ if .ScannedAt }}<p class="text-xs text-base-content/60">Scanned: {{ .ScannedAt }}</p>{{ end }}
    </div>
    {{ else }}
    <div class="alert alert-warning" role="alert">
        {{ icon "alert-triangle" "size-5 shrink-0" }}
        <span>{{ .Error }}</span>
    </div>
    {{ end }}
{{ else }}
<div class="space-y-4" data-csv-section data-csv-filename="vulnerabilities.csv">
    <!-- Summary badges -->
    <div class="flex flex-wrap items-center gap-3">
        <span class="font-semibold text-sm">{{ .Summary.Total }} vulnerabilities</span>
        <span class="vuln-strip" role="group" aria-label="Vulnerability summary by severity">
            <span class="tooltip vuln-box-critical" data-tip="Critical" aria-label="{{ .Summary.Critical }} critical">{{ .Summary.Critical }}</span>
            <span class="tooltip vuln-box-high" data-tip="High" aria-label="{{ .Summary.High }} high">{{ .Summary.High }}</span>
            <span class="tooltip vuln-box-medium" data-tip="Medium" aria-label="{{ .Summary.Medium }} medium">{{ .Summary.Medium }}</span>
            <span class="tooltip vuln-box-low" data-tip="Low" aria-label="{{ .Summary.Low }} low">{{ .Summary.Low }}</span>
        </span>
        {{ if .Matches }}
        <details class="dropdown dropdown-end ml-auto">
            <summary class="btn btn-ghost btn-xs gap-1 list-none" aria-label="Export vulnerabilities">
                {{ icon "download" "size-3.5" }}
                {{ icon "chevron-down" "size-3" }}
            </summary>
            <ul class="dropdown-content menu bg-base-200 rounded-box z-50 w-52 p-2 shadow-lg border border-base-300">
                <li><button type="button" data-copy-csv>{{ icon "copy" "size-4" }} Copy as CSV</button></li>
                <li><a href="/api/scan-download?type=vuln&digest={{ .Digest | urlquery }}&holdEndpoint={{ .HoldEndpoint | urlquery }}" download>{{ icon "download" "size-4" }} Grype Report</a></li>
            </ul>
        </details>
        {{ end }}
    </div>

    {{ if .ScannedAt }}<p class="text-xs text-base-content/60">Scanned: {{ .ScannedAt }}</p>{{ end }}

    {{ if .Matches }}
    <!-- CVE table -->
    <div class="overflow-x-auto overflow-y-auto max-h-128">
        <table class="table table-xs table-pin-rows w-full min-w-160">
            <caption class="sr-only">Detected vulnerabilities</caption>
            <thead>
                <tr>
                    <th scope="col">CVE</th>
                    <th scope="col"><span class="sr-only">Severity</span></th>
                    <th scope="col">Package</th>
                    <th scope="col">Version</th>
                    <th scope="col">Fix</th>
                </tr>
            </thead>
            <tbody>
                {{ range .Matches }}
                <tr>
                    <td class="font-mono text-xs">
                        {{ if .CVEURL }}
                            <a href="{{ .CVEURL }}" target="_blank" rel="noopener noreferrer" class="link link-primary">{{ .CVEID }}</a>
                        {{ else }}
                            {{ .CVEID }}
                        {{ end }}
                    </td>
                    <td>
                        {{ if eq .Severity "Critical" }}
                            <span class="badge badge-xs badge-error" title="Critical" aria-label="Critical"><span aria-hidden="true">C</span></span>
                        {{ else if eq .Severity "High" }}
                            <span class="badge badge-xs badge-warning" title="High" aria-label="High"><span aria-hidden="true">H</span></span>
                        {{ else if eq .Severity "Medium" }}
                            <span class="badge badge-xs badge-soft badge-warning" title="Medium" aria-label="Medium"><span aria-hidden="true">M</span></span>
                        {{ else if eq .Severity "Low" }}
                            <span class="badge badge-xs badge-info" title="Low" aria-label="Low"><span aria-hidden="true">L</span></span>
                        {{ else }}
                            <span class="badge badge-xs badge-ghost" title="{{ .Severity }}" aria-label="{{ or .Severity "Unknown severity" }}"><span aria-hidden="true">?</span></span>
                        {{ end }}
                    </td>
                    <td class="text-xs">
                        {{ .Package }}{{ if .Type }} <span class="text-base-content/60">({{ .Type }})</span>{{ end }}
                    </td>
                    <td class="font-mono text-xs">{{ .Version }}</td>
                    <td class="font-mono text-xs">
                        {{ if .FixedIn }}
                            <span class="text-success">{{ .FixedIn }}</span>
                        {{ else }}
                            <span class="text-base-content/40">-</span>
                        {{ end }}
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    {{ end }}
</div>
{{ end }}
{{ end }}