{{define "skill.html"}}
<div class="max-w-4xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-start justify-between mb-4">
            <div>
                <h1 class="text-2xl font-semibold mb-2">{{.Skill.Name}}</h1>
                <p class="text-terminal-muted">{{.Skill.Description}}</p>
            </div>
            <div class="flex gap-2">
                <a href="/api/skill/{{.Skill.Slug}}/download"
                   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">
                    Download
                </a>
                <button onclick="copySkillUrl()"
                        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">
                    Copy URL
                </button>
            </div>
        </div>

        <!-- Meta -->
        <div class="flex flex-wrap gap-4 text-sm text-terminal-muted">
            <span>v{{.Skill.Version}}</span>
            {{if .Skill.SourceFormat}}
            <span class="px-2 py-0.5 border border-terminal-border">{{.Skill.SourceFormat}}</span>
            {{end}}
            <span>{{.Skill.ViewCount}} views</span>
        </div>

        <!-- Tags -->
        {{if .Skill.Tags}}
        <div class="flex flex-wrap gap-2 mt-4">
            {{range .Skill.Tags}}
            <a href="/merge" class="px-2 py-1 bg-terminal-bg border border-terminal-border text-xs hover:border-terminal-accent transition-colors">
                {{.}}
            </a>
            {{end}}
        </div>
        {{end}}
    </div>

    <!-- Content -->
    <div class="border border-terminal-border bg-terminal-surface">
        <div class="border-b border-terminal-border px-4 py-3 flex items-center justify-between">
            <span class="text-sm font-medium">SKILL.md</span>
            <button onclick="copyContent()" 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">
                Copy
            </button>
        </div>
        <div class="p-4 overflow-auto">
            <pre id="skill-content" class="text-sm whitespace-pre-wrap">{{.Skill.Content}}</pre>
        </div>
    </div>

    <!-- Back link -->
    <div class="mt-6">
        <a href="/merge" class="text-terminal-accent hover:underline">&larr; Back to merge</a>
    </div>
</div>

<script>
function copySkillUrl() {
    navigator.clipboard.writeText(window.location.href);
    alert('URL copied to clipboard!');
}

function copyContent() {
    const content = document.getElementById('skill-content').textContent;
    navigator.clipboard.writeText(content);
    alert('Content copied to clipboard!');
}
</script>
{{end}}