{{ define "card-grid" }}
{{/*
    Card grid component - displays repository cards in a responsive grid

    Required:
    - .Repositories: []db.RepoCardData - list of repositories to display

    Optional:
    - .Columns: int - number of columns on xl screens (3 or 4, default 3)
    - .EmptyMessage: string - message when no repositories (default: "No repositories found.")
    - .EmptyIcon: string - lucide icon name for empty state
    - .EmptySubtext: string - secondary text for empty state
    - .LoadMoreURL: string - URL for Load More button (HTMX)
    - .TargetID: string - HTMX target ID for Load More
    - .HasMore: bool - whether to show Load More button
*/}}
{{ if .Repositories }}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3{{ if eq .Columns 4 }} xl:grid-cols-4{{ end }} gap-6">
    {{ range .Repositories }}
        {{ template "repo-card" . }}
    {{ end }}
</div>
{{ if and .HasMore .LoadMoreURL }}
<div class="mt-6 text-center">
    <button
        class="btn btn-outline"
        hx-get="{{ .LoadMoreURL }}"
        hx-trigger="click"
        hx-target="#{{ .TargetID }}"
        hx-swap="beforeend"
    >
        Load More
    </button>
</div>
{{ end }}
{{ else }}
<div class="py-12 text-center">
    {{ if .EmptyIcon }}
    <div class="text-base-content/60 mb-4">
        {{ icon .EmptyIcon "size-12 mx-auto mb-4" }}
        <p class="text-lg">{{ or .EmptyMessage "No repositories found." }}</p>
    </div>
    {{ if .EmptySubtext }}
    <p class="text-base-content/40 text-sm">{{ .EmptySubtext }}</p>
    {{ end }}
    {{ else }}
    <p class="text-base-content/60">{{ or .EmptyMessage "No repositories found." }}</p>
    {{ end }}
</div>
{{ end }}
{{ end }}