{% extends "base.html" %}

{% block title %}{{ plugin.name }} - {{ marketplace.name }}{% endblock %}
{% block og_title %}{{ plugin.name }} - {{ marketplace.name }}{% endblock %}
{% block og_description %}{{ plugin.description or (plugin.name ~ ' plugin') }}{% endblock %}
{% block og_type %}article{% endblock %}
{% block og_url %}<meta property="og:url" content="{{ page_url }}">{% endblock %}
{% block og_image %}{{ base_url }}/static/{{ logo }}{% endblock %}
{% block meta_description %}{{ plugin.description or (plugin.name ~ ' plugin') }}{% endblock %}
{% block css_path %}../../static/style.css{% endblock %}
{% block js_path %}../../static/theme.js{% endblock %}
{% block home_href %}../../index.html{% endblock %}
{% block logo_path %}../../static/{{ logo }}{% endblock %}

{% block content %}
<nav class="breadcrumb">
    <a href="../../index.html">Home</a>
    <span class="breadcrumb-sep">&rsaquo;</span>
    <span>{{ plugin.name }}</span>
</nav>

<section class="plugin-header">
    <h1>{{ plugin.name }}</h1>
    {% if plugin.description %}
    <p class="plugin-description">{{ plugin.description }}</p>
    {% endif %}

    <div class="plugin-meta">
        {% if plugin.version %}
        <span class="meta-item">Version: <strong>{{ plugin.version }}</strong></span>
        {% endif %}
        {% if plugin.author %}
        <span class="meta-item">Author: <strong>{{ plugin.author.name }}</strong></span>
        {% endif %}
        {% if plugin.category %}
        <span class="meta-item">Category: <a href="../../index.html?category={{ plugin.category }}" class="badge badge-category filter-link">{{ plugin.category }}</a></span>
        {% endif %}
    </div>

    {% if plugin.keywords %}
    <div class="plugin-keywords">
        {% for kw in plugin.keywords %}
        <span class="keyword">{{ kw }}</span>
        {% endfor %}
    </div>
    {% endif %}

    {% if plugin.tags %}
    <div class="plugin-tags">
        {% for tag in plugin.tags %}
        <a href="../../index.html?tag={{ tag }}" class="tag filter-link">{{ tag }}</a>
        {% endfor %}
    </div>
    {% endif %}

    <div class="plugin-links">
        {% if plugin.source_url %}
        <a href="{{ plugin.source_url }}" class="link-button" target="_blank" rel="noopener">Source</a>
        {% endif %}
        {% if plugin.homepage %}
        <a href="{{ plugin.homepage }}" class="link-button" target="_blank" rel="noopener">Homepage</a>
        {% endif %}
        {% if plugin.repository %}
        <a href="{{ plugin.repository }}" class="link-button" target="_blank" rel="noopener">Repository</a>
        {% endif %}
    </div>
</section>

<section class="install-section">
    <h2>Installation</h2>
    <div class="install-tabs">
        <button type="button" class="install-tab active" data-tab="claude-code">Claude Code</button>
        <button type="button" class="install-tab" data-tab="bash">Bash</button>
    </div>
    <div class="install-panel active" data-panel="claude-code">
        <div class="code-block">
            <code>/plugin marketplace add {{ marketplace.name }}</code>
            <button type="button" class="copy-btn" aria-label="Copy to clipboard">Copy</button>
        </div>
        <div class="code-block">
            <code>/plugin install {{ plugin.name }}@{{ marketplace.name }}</code>
            <button type="button" class="copy-btn" aria-label="Copy to clipboard">Copy</button>
        </div>
    </div>
    <div class="install-panel" data-panel="bash">
        <div class="code-block">
            <code>claude plugin add marketplace {{ marketplace.name }}</code>
            <button type="button" class="copy-btn" aria-label="Copy to clipboard">Copy</button>
        </div>
        <div class="code-block">
            <code>claude plugin install {{ plugin.name }}@{{ marketplace.name }}</code>
            <button type="button" class="copy-btn" aria-label="Copy to clipboard">Copy</button>
        </div>
    </div>
</section>

<script>
(function() {
    var tabs = document.querySelectorAll('.install-tab');
    var panels = document.querySelectorAll('.install-panel');
    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            tabs.forEach(function(t) { t.classList.remove('active'); });
            panels.forEach(function(p) { p.classList.remove('active'); });
            tab.classList.add('active');
            var panel = document.querySelector('[data-panel="' + tab.dataset.tab + '"]');
            if (panel) panel.classList.add('active');
        });
    });
    document.querySelectorAll('.copy-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var code = this.parentElement.querySelector('code').textContent;
            navigator.clipboard.writeText(code).then(function() {
                btn.textContent = 'Copied!';
                setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
            });
        });
    });
})();
</script>

{% if plugin.components.skills %}
<section class="component-section">
    <h2><span class="badge badge-skills">Skills</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th></tr>
        </thead>
        <tbody>
            {% for skill in plugin.components.skills %}
            <tr>
                <td><code>{{ skill.name }}</code></td>
                <td>{{ skill.description or "" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.commands %}
<section class="component-section">
    <h2><span class="badge badge-commands">Commands</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th></tr>
        </thead>
        <tbody>
            {% for cmd in plugin.components.commands %}
            <tr>
                <td><code>{{ cmd.name }}</code></td>
                <td>{{ cmd.description or "" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.agents %}
<section class="component-section">
    <h2><span class="badge badge-agents">Agents</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th><th>Model</th></tr>
        </thead>
        <tbody>
            {% for agent in plugin.components.agents %}
            <tr>
                <td><code>{{ agent.name }}</code></td>
                <td>{{ agent.description or "" }}</td>
                <td>{{ agent.model or "" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.hooks %}
<section class="component-section">
    <h2><span class="badge badge-hooks">Hooks</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Event</th><th>Matcher</th><th>Type</th></tr>
        </thead>
        <tbody>
            {% for hook in plugin.components.hooks %}
            <tr>
                <td><code>{{ hook.event_name }}</code></td>
                <td>{{ hook.matcher or "" }}</td>
                <td>{{ hook.hook_type }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.mcp_servers %}
<section class="component-section">
    <h2><span class="badge badge-mcp">MCP Servers</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Command</th></tr>
        </thead>
        <tbody>
            {% for mcp in plugin.components.mcp_servers %}
            <tr>
                <td><code>{{ mcp.name }}</code></td>
                <td><code>{{ mcp.command }}</code></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.lsp_servers %}
<section class="component-section">
    <h2><span class="badge badge-lsp">LSP Servers</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Command</th></tr>
        </thead>
        <tbody>
            {% for lsp in plugin.components.lsp_servers %}
            <tr>
                <td><code>{{ lsp.name }}</code></td>
                <td><code>{{ lsp.command }}</code></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.readme_html %}
<section class="readme-section">
    <h2>README</h2>
    <div class="markdown-content">
        {{ plugin.readme_html | safe }}
    </div>
</section>
{% endif %}

{% if plugin.license_text %}
<section class="license-section">
    <h2>License{% if plugin.license_id %} ({{ plugin.license_id }}){% endif %}</h2>
    <pre class="license-text">{{ plugin.license_text }}</pre>
</section>
{% endif %}
{% endblock %}