{{define "skill-external.html"}}
<div class="max-w-4xl mx-auto px-4 py-8">
    <!-- Back link -->
    <a href="/merge" class="inline-flex items-center text-terminal-muted hover:text-terminal-accent mb-6 transition-colors">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to merge
    </a>

    <div class="border border-terminal-border bg-terminal-surface">
        <!-- Header -->
        <div class="border-b border-terminal-border p-6">
            <div class="flex items-start justify-between gap-4">
                <div class="flex-1">
                    <h1 class="text-2xl font-semibold mb-2">{{.Skill.Name}}</h1>
                    {{if .Skill.Description}}
                    <p class="text-terminal-muted">{{.Skill.Description}}</p>
                    {{end}}
                </div>

                <!-- Source Badge -->
                <span class="flex-shrink-0 px-3 py-1 text-sm border {{if eq .Skill.Source "skills.sh"}}border-purple-500 text-purple-400{{else if eq .Skill.Source "github"}}border-gray-400 text-gray-300{{else if eq .Skill.Source "gitlab"}}border-orange-500 text-orange-400{{else if eq .Skill.Source "bitbucket"}}border-blue-500 text-blue-400{{else if eq .Skill.Source "codeberg"}}border-green-500 text-green-400{{else}}border-terminal-border text-terminal-muted{{end}}">
                    {{if eq .Skill.Source "skills.sh"}}SKILLS.sh (Vercel){{else if eq .Skill.Source "github"}}GitHub{{else if eq .Skill.Source "gitlab"}}GitLab{{else if eq .Skill.Source "bitbucket"}}Bitbucket{{else if eq .Skill.Source "codeberg"}}Codeberg{{else}}{{.Skill.Source}}{{end}}
                </span>
            </div>

            <!-- Meta info -->
            <div class="flex flex-wrap items-center gap-4 mt-4 text-sm text-terminal-muted">
                {{if .Skill.RepoOwner}}
                <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    {{.Skill.RepoOwner}}
                </span>
                {{end}}
                {{if .Skill.Stars}}
                <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                    </svg>
                    {{.Skill.Stars}} stars
                </span>
                {{end}}
                {{if .Skill.Version}}
                <span>v{{.Skill.Version}}</span>
                {{end}}
            </div>

            <!-- Tags -->
            {{if .Skill.Tags}}
            <div class="flex flex-wrap gap-2 mt-4">
                {{range .Skill.Tags}}
                <span class="px-2 py-1 bg-terminal-bg border border-terminal-border text-xs">{{.}}</span>
                {{end}}
            </div>
            {{end}}
        </div>

        <!-- Actions -->
        <div class="border-b border-terminal-border p-4 flex flex-wrap gap-4">
            <a href="{{.Skill.SourceURL}}" target="_blank" rel="noopener noreferrer"
               class="inline-flex items-center gap-2 px-4 py-2 text-sm bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
                View on {{if eq .Skill.Source "skills.sh"}}SKILLS.sh (Vercel){{else if eq .Skill.Source "github"}}GitHub{{else if eq .Skill.Source "gitlab"}}GitLab{{else if eq .Skill.Source "bitbucket"}}Bitbucket{{else if eq .Skill.Source "codeberg"}}Codeberg{{else}}{{.Skill.Source}}{{end}}
            </a>

            {{if .Skill.Content}}
            <form hx-post="/api/skills/import-external"
                  hx-target="body"
                  hx-swap="none"
                  class="inline">
                <input type="hidden" name="source" value="{{.Skill.Source}}">
                <input type="hidden" name="id" value="{{.Skill.ID}}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                    </svg>
                    Import
                </button>
            </form>
            {{end}}
        </div>

        <!-- Content -->
        {{if .Skill.Content}}
        <div class="p-6">
            <h2 class="text-lg font-medium mb-4">Content</h2>
            <pre class="text-sm whitespace-pre-wrap overflow-auto max-h-[600px] bg-terminal-bg p-4 border border-terminal-border">{{.Skill.Content}}</pre>
        </div>
        {{else}}
        <div class="p-6 text-center text-terminal-muted">
            <p class="mb-4">Content not loaded. Click the button below to fetch the full SKILL.md content.</p>
            <button hx-get="/api/external/{{.Skill.Source}}/content/{{.Skill.ID}}"
                    hx-target="#skill-content"
                    hx-swap="innerHTML"
                    class="px-4 py-2 text-sm bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors">
                Load
            </button>
            <div id="skill-content" class="mt-4"></div>
        </div>
        {{end}}
    </div>
</div>
{{end}}