{{define "skill-list.html"}}
{{if .SourceErrors}}
<div class="mb-4 space-y-2">
    {{range $source, $error := .SourceErrors}}
    <div class="px-3 py-2 text-xs bg-terminal-bg border border-yellow-600/50 text-yellow-500">
        <span class="font-medium">{{if eq $source "github"}}GitHub{{else if eq $source "gitlab"}}GitLab{{else if eq $source "skills.sh"}}SKILLS.sh{{else if eq $source "bitbucket"}}Bitbucket{{else if eq $source "codeberg"}}Codeberg{{else}}{{$source}}{{end}}:</span> {{$error}}
    </div>
    {{end}}
</div>
{{end}}
{{if .Skills}}
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    {{range .Skills}}
    <a href="{{if eq .Source "local"}}/skill/{{.Slug}}{{else}}/external/{{.Source}}/{{.ID}}{{end}}"
       class="block border border-terminal-border bg-terminal-surface p-4 hover:border-terminal-accent transition-colors hover-lift">
        <div class="flex items-start justify-between gap-2 mb-2">
            <h3 class="font-medium truncate flex-1">{{.Name}}</h3>
            <!-- Source Badge -->
            <span class="flex-shrink-0 px-1.5 py-0.5 text-xs border {{if eq .Source "local"}}border-terminal-accent text-terminal-accent{{else if eq .Source "skills.sh"}}border-purple-500 text-purple-400{{else if eq .Source "github"}}border-gray-400 text-gray-300{{else if eq .Source "gitlab"}}border-orange-500 text-orange-400{{else if eq .Source "bitbucket"}}border-blue-500 text-blue-400{{else if eq .Source "codeberg"}}border-green-500 text-green-400{{else}}border-terminal-border text-terminal-muted{{end}}">
                {{if eq .Source "local"}}Local{{else if eq .Source "skills.sh"}}SKILLS.sh{{else if eq .Source "github"}}GitHub{{else if eq .Source "gitlab"}}GitLab{{else if eq .Source "bitbucket"}}Bitbucket{{else if eq .Source "codeberg"}}Codeberg{{else}}{{.Source}}{{end}}
            </span>
        </div>
        {{if .Description}}
        <p class="text-sm text-terminal-muted mb-3 line-clamp-2">{{truncate .Description 100}}</p>
        {{end}}
        <div class="flex items-center justify-between text-xs text-terminal-muted">
            <span>{{if .Version}}v{{.Version}}{{else if .RepoOwner}}{{.RepoOwner}}{{end}}</span>
            <span>{{if .Stars}}{{.Stars}} stars{{end}}</span>
        </div>
        {{if .Tags}}
        <div class="flex flex-wrap gap-1 mt-2">
            {{range .Tags}}
            <span class="px-1.5 py-0.5 bg-terminal-bg border border-terminal-border text-xs">{{.}}</span>
            {{end}}
        </div>
        {{end}}
    </a>
    {{end}}
</div>

<!-- Infinite Scroll / Lazy Loading -->
{{if .HasNext}}
<div hx-get="/browse?page={{.NextPage}}{{if .Query}}&q={{.Query}}{{end}}{{if .Tag}}&tag={{.Tag}}{{end}}{{if .Source}}&source={{.Source}}{{end}}"
     hx-trigger="revealed"
     hx-swap="afterend"
     class="flex justify-center py-8">
    <div class="htmx-indicator flex items-center gap-2 text-terminal-muted">
        <svg class="w-5 h-5 loading-spinner" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        <span class="text-sm">Loading more...</span>
    </div>
</div>
{{end}}

{{else}}
<div class="text-center py-12 text-terminal-muted">
    <svg class="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
    </svg>
    <p class="text-lg mb-2">No skills found</p>
    <p class="text-sm">{{if .Query}}Try a different search term.{{else}}Be the first to add a skill!{{end}}</p>
    <a href="/convert" class="inline-block mt-4 px-4 py-2 bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors">
        Convert a spec
    </a>
</div>
{{end}}
{{end}}