{{ define "repo-card" }}
{{/*
    Repository card component - displays a repository as a clickable card

    Expects: db.RepoCardData struct with fields:
    - OwnerHandle: string - Repository owner's handle
    - OwnerAvatarURL: string (optional) - Owner's profile avatar URL (fallback when no repo icon)
    - Repository: string - Repository name
    - Title: string (optional) - Display title
    - Description: string (optional) - Repository description
    - IconURL: string (optional) - Repository icon URL
    - StarCount: int - Number of stars
    - PullCount: int - Number of pulls
    - ArtifactType: string - container-image, helm-chart, unknown
    - Tag: string (optional) - Latest tag name
    - Digest: string (optional) - Latest manifest digest
    - LastUpdated: time.Time (optional) - Last push time
    - RegistryURL: string - Registry URL for docker commands (e.g., "atcr.io")
*/}}
<div class="card card-interactive bg-base-200 border-2 border-base-300 p-6 flex flex-col justify-between min-h-60 w-full" data-href="/r/{{ .OwnerHandle }}/{{ .Repository }}">
    <div class="flex gap-4 items-start">
        {{ if .IconURL }}
            <img src="{{ resizeImage .IconURL 96 }}" alt="{{ .Repository }}" loading="lazy" width="48" height="48" class="w-12 rounded-lg object-cover shrink-0">
        {{ else if .OwnerAvatarURL }}
            <img src="{{ resizeImage .OwnerAvatarURL 96 }}" alt="{{ .OwnerHandle }}" loading="lazy" width="48" height="48" class="w-12 rounded-lg object-cover shrink-0">
        {{ else }}
            <div class="avatar avatar-placeholder">
                <div class="bg-neutral text-neutral-content w-12 rounded-lg shadow-sm uppercase">
                    <span class="text-lg">{{ firstChar .Repository }}</span>
                </div>
            </div>
        {{ end }}
        <div class="flex-1 min-w-0">
            <div class="font-semibold text-sm truncate">
                <a href="/u/{{ .OwnerHandle }}" class="link link-primary" onclick="event.stopPropagation()">{{ .OwnerHandle }}</a>
                <span class="text-base-content/60">/</span>
                <a href="/r/{{ .OwnerHandle }}/{{ .Repository }}" class="link text-base-content hover:underline" onclick="event.stopPropagation()">{{ .Repository }}</a>
            </div>
            {{ if .Tag }}
                <span class="block text-base-content/60 text-sm truncate">Tag: {{ .Tag }}</span>
            {{ end }}
        </div>
    </div>
    {{ if .Description }}
        <p class="text-base-content/60 text-sm line-clamp-3 m-0 my-4">{{ .Description }}</p>
    {{ end }}
    <div class="flex-1 flex flex-col justify-end py-2 min-w-0">
        {{ if eq .ArtifactType "helm-chart" }}
            {{ if .Tag }}
                {{ template "docker-command" (printf "helm pull oci://%s/%s/%s --version %s" .RegistryURL .OwnerHandle .Repository .Tag) }}
            {{ else }}
                {{ template "docker-command" (printf "helm pull oci://%s/%s/%s" .RegistryURL .OwnerHandle .Repository) }}
            {{ end }}
        {{ else }}
            {{ if .Tag }}
                {{ template "docker-command" (printf "docker pull %s/%s/%s:%s" .RegistryURL .OwnerHandle .Repository .Tag) }}
            {{ else }}
                {{ template "docker-command" (printf "docker pull %s/%s/%s" .RegistryURL .OwnerHandle .Repository) }}
            {{ end }}
        {{ end }}
    </div>
    <div class="flex justify-between items-center pt-3 border-t border-base-300">
        <div class="flex gap-6 items-center">
            {{ template "star" (dict "IsStarred" .IsStarred "StarCount" .StarCount) }}
            {{ template "pull-count" (dict "PullCount" .PullCount) }}
            {{ if eq .ArtifactType "helm-chart" }}
                {{ icon "helm" "size-5 text-helm" }}
            {{ end }}
        </div>
        {{ if not .LastUpdated.IsZero }}
            <span class="text-base-content/60 text-sm flex items-center gap-1">{{ icon "history" "size-4" }}{{ timeAgoShort .LastUpdated }}</span>
        {{ end }}
    </div>
</div>
{{ end }}