{{ define "attestation-details" }}
{{ if .Error }}
    <p class="text-base-content/60">{{ .Error }}</p>
{{ else }}
<div class="space-y-4">
    <p class="font-semibold text-sm">{{ len .Attestations }} attestation{{ if gt (len .Attestations) 1 }}s{{ end }} attached</p>

    {{ range .Attestations }}
    <div class="bg-base-200 rounded-lg p-4 space-y-3">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <span class="badge badge-md badge-soft badge-success">{{ .PredicateType }}</span>
            <code class="font-mono text-xs text-base-content/60 truncate max-w-48" title="{{ .Digest }}">{{ .Digest }}</code>
        </div>
        {{ if .NeedsLogin }}
            <p class="text-sm text-base-content/50"><a href="{{ $.LoginURL }}" class="link link-primary">Log in</a> to view attestation content</p>
        {{ else if .FetchError }}
            <p class="text-sm text-base-content/50">{{ .FetchError }}</p>
        {{ else if .RawJSON }}
            <details>
                <summary class="cursor-pointer text-sm text-base-content/70 hover:text-base-content">View content</summary>
                <div class="mt-2 overflow-x-auto max-h-64">
                    <pre class="text-xs bg-base-300 rounded p-3 whitespace-pre-wrap break-all"><code>{{ .RawJSON }}</code></pre>
                </div>
            </details>
        {{ else if .Size }}
            <p class="text-sm text-base-content/50">Binary content ({{ .Size }} bytes) — cannot display inline</p>
        {{ end }}
    </div>
    {{ end }}
</div>
{{ end }}
{{ end }}