{{ range .Pushes }}
<div class="push-card">
    <div class="push-header">
        {{ if .IconURL }}
            <img src="{{ .IconURL }}" alt="{{ .Repository }}" class="push-icon">
        {{ else }}
            <div class="push-icon-placeholder">{{ firstChar .Repository }}</div>
        {{ end }}
        <div class="push-info">
            <div class="push-title-row">
                <div class="push-title">
                    <a href="/u/{{ .Handle }}" class="push-user">{{ .Handle }}</a>
                    <span class="push-separator">/</span>
                    <a href="/r/{{ .Handle }}/{{ .Repository }}" class="push-repo">{{ .Repository }}</a>
                    <span class="push-separator">:</span>
                    <span class="push-tag">{{ .Tag }}</span>
                </div>
                <div class="push-stats">
                    <span class="push-stat">
                        <i data-lucide="star" class="star-icon{{ if .IsStarred }} star-filled{{ end }}"></i>
                        <span class="stat-count">{{ .StarCount }}</span>
                    </span>
                    <span class="push-stat">
                        <i data-lucide="arrow-down-to-line" class="pull-icon"></i>
                        <span class="stat-count">{{ .PullCount }}</span>
                    </span>
                </div>
            </div>
            {{ if .Description }}
                <p class="push-description">{{ .Description }}</p>
            {{ end }}
        </div>
    </div>

    <div class="push-details">
        <div class="digest-container">
            <code class="digest" title="{{ .Digest }}">{{ .Digest }}</code>
            <button class="digest-copy-btn" onclick="copyToClipboard('{{ .Digest }}')"><i data-lucide="copy"></i></button>
        </div>
        <time class="timestamp" datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z07:00" }}">
            {{ timeAgo .CreatedAt }}
        </time>
    </div>
</div>
{{ end }}

{{ if .HasMore }}
<button class="load-more"
        hx-get="/api/recent-pushes?offset={{ .NextOffset }}"
        hx-target="#push-list"
        hx-swap="beforeend">
    Load More
</button>
{{ end }}

{{ if eq (len .Pushes) 0 }}
<div class="empty-state">
    <p>No pushes yet. Start using ATCR by pushing your first image!</p>
    <pre><code>docker push {{ .RegistryURL }}/yourhandle/myapp:latest</code></pre>
</div>
{{ end }}