{{ 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
    - 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
*/}}
<a href="/r/{{ .OwnerHandle }}/{{ .Repository }}" class="featured-card">
    <div class="featured-header">
        {{ if .IconURL }}
            <img src="{{ .IconURL }}" alt="{{ .Repository }}" class="featured-icon">
        {{ else }}
            <div class="featured-icon-placeholder">{{ firstChar .Repository }}</div>
        {{ end }}
        <div class="featured-info">
            <div class="featured-title">
                <span class="featured-owner">{{ .OwnerHandle }}</span>
                <span class="featured-separator">/</span>
                <span class="featured-name">{{ .Repository }}</span>
            </div>
            {{ if .Description }}
                <p class="featured-description">{{ .Description }}</p>
            {{ end }}
        </div>
    </div>
    <div class="featured-stats">
        <span class="featured-stat">
            <i data-lucide="star" class="star-icon{{ if .IsStarred }} star-filled{{ end }}"></i>
            <span class="stat-count">{{ .StarCount }}</span>
        </span>
        <span class="featured-stat">
            <i data-lucide="arrow-down-to-line" class="pull-icon"></i>
            <span class="stat-count">{{ .PullCount }}</span>
        </span>
    </div>
</a>
{{ end }}