{% extends "base.html" %}

{% block title %}{{ plugin.title }} - {{ marketplace.title }}{% endblock %}
{% block og_title %}{{ plugin.title }} - {{ marketplace.title }}{% endblock %}
{% block og_description %}{{ plugin.description or (plugin.title ~ ' 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.title ~ ' 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 sidebar %}
<div class="sidebar-label">Explorer</div>
<a href="../../index.html" class="sidebar-link"><span aria-hidden="true">←</span> All plugins <span class="nav-count">{{ marketplace.plugins | length }}</span></a>
<div class="sidebar-section">
    <div class="sidebar-label">On this page</div>
    <a class="sidebar-link" href="#overview">Overview</a>
    <a class="sidebar-link" href="#installation">Installation</a>
    {% for key, label in [('skills', 'Skills'), ('commands', 'Commands'), ('agents', 'Agents'), ('hooks', 'Hooks'), ('mcp_servers', 'MCP servers'), ('lsp_servers', 'LSP servers'), ('apps', 'Apps')] %}
    {% set items = plugin.components | attr(key) %}
    {% if items %}<a class="sidebar-link" href="#{{ key }}">{{ label }}<span class="nav-count">{{ items | length }}</span></a>{% endif %}
    {% endfor %}
    {% if plugin.readme_html %}<a class="sidebar-link" href="#readme">README</a>{% endif %}
    {% if plugin.license_text %}<a class="sidebar-link" href="#license">License</a>{% endif %}
</div>
{% endblock %}

{% block content %}
<nav class="breadcrumb">
    <a href="../../index.html">Plugins</a>
    <span class="breadcrumb-sep">/</span>
    <span>{{ plugin.title }}</span>
</nav>

<section class="plugin-header" id="overview">
    <div class="eyebrow">Plugin / {{ plugin.name }}</div>
    <h1>{{ plugin.title }}</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>

<div class="detail-layout">
<aside class="install-section" id="installation">
    <div class="terminal-label"><span aria-hidden="true">&gt;_</span> Get started</div>
    <h2>Installation</h2>
    {% if marketplace.format == 'codex' %}
    {% if plugin.installation == 'NOT_AVAILABLE' %}
    <p>This plugin is not available for installation in this marketplace.</p>
    {% else %}
    <p>Add the marketplace, then select {{ plugin.title }} in the Codex app's plugin directory.</p>
    <div class="code-block">
        <code>codex plugin marketplace add {{ (marketplace.repository_id or marketplace.name) | shellquote }}</code>
        <button type="button" class="copy-btn" aria-label="Copy to clipboard">Copy</button>
    </div>
    {% endif %}
    {% else %}
    <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.repository_id or 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 marketplace add {{ marketplace.repository_id or 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>
    {% endif %}
</aside>
<div class="detail-main">

<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);
            }).catch(function() {
                btn.textContent = 'Select code';
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(btn.parentElement.querySelector('code'));
                selection.removeAllRanges(); selection.addRange(range);
            });
        });
    });
})();
</script>

{% macro detail_cell(item, colspan) %}
<tr class="detail-row">
    <td colspan="{{ colspan }}">
        <div class="detail-content">
            {% set extra_keys = [] %}
            {% for key in item.frontmatter %}
                {% if key != 'description' %}
                    {% if extra_keys.append(key) %}{% endif %}
                {% endif %}
            {% endfor %}
            {% if extra_keys %}
            <table class="frontmatter-table">
                {% for key in extra_keys %}
                <tr><th>{{ key }}</th><td>{{ item.frontmatter[key] }}</td></tr>
                {% endfor %}
            </table>
            {% endif %}
            {% if item.body_html %}
            <div class="body-section">
                <div class="markdown-content">{{ item.body_html | safe }}</div>
            </div>
            {% endif %}
        </div>
    </td>
</tr>
{% endmacro %}

{% macro has_detail(item) %}{% set extra = item.frontmatter.keys() | reject('equalto', 'description') | list %}{% if extra or item.body_html %}1{% endif %}{% endmacro %}

{% if plugin.components.skills %}
<section class="component-section" id="skills">
    <h2><span class="badge badge-skills">Skills</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th><th class="detail-col"></th></tr>
        </thead>
        <tbody>
            {% for skill in plugin.components.skills %}
            <tr>
                <td><code>{{ skill.name }}</code></td>
                <td>{{ skill.description or "" }}</td>
                <td class="detail-col">{% if has_detail(skill) | trim %}<button type="button" class="detail-toggle" aria-expanded="false">Show Detail</button>{% endif %}</td>
            </tr>
            {% if has_detail(skill) | trim %}
            {{ detail_cell(skill, 3) }}
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.commands %}
<section class="component-section" id="commands">
    <h2><span class="badge badge-commands">Commands</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th><th class="detail-col"></th></tr>
        </thead>
        <tbody>
            {% for cmd in plugin.components.commands %}
            <tr>
                <td><code>{{ cmd.name }}</code></td>
                <td>{{ cmd.description or "" }}</td>
                <td class="detail-col">{% if has_detail(cmd) | trim %}<button type="button" class="detail-toggle" aria-expanded="false">Show Detail</button>{% endif %}</td>
            </tr>
            {% if has_detail(cmd) | trim %}
            {{ detail_cell(cmd, 3) }}
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.agents %}
<section class="component-section" id="agents">
    <h2><span class="badge badge-agents">Agents</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Description</th><th>Model</th><th class="detail-col"></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>
                <td class="detail-col">{% if has_detail(agent) | trim %}<button type="button" class="detail-toggle" aria-expanded="false">Show Detail</button>{% endif %}</td>
            </tr>
            {% if has_detail(agent) | trim %}
            {{ detail_cell(agent, 4) }}
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.hooks %}
<section class="component-section" id="hooks">
    <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" id="mcp_servers">
    <h2><span class="badge badge-mcp">MCP Servers</span></h2>
    <table class="component-table">
        <thead>
            <tr><th>Name</th><th>Command / URL</th></tr>
        </thead>
        <tbody>
            {% for mcp in plugin.components.mcp_servers %}
            <tr>
                <td><code>{{ mcp.name }}</code></td>
                <td><code>{{ mcp.command or mcp.url or "" }}</code></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

{% if plugin.components.lsp_servers %}
<section class="component-section" id="lsp_servers">
    <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.components.apps %}
<section class="component-section" id="apps">
    <h2><span class="badge badge-apps">Apps</span></h2>
    <table class="component-table">
        <thead><tr><th>Name</th><th>ID</th></tr></thead>
        <tbody>
            {% for app in plugin.components.apps %}
            <tr><td>{{ app.name }}</td><td><code>{{ app.id }}</code></td></tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endif %}

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

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

<script>
document.querySelectorAll('.detail-toggle').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var row = this.closest('tr');
        var detail = row.nextElementSibling;
        if (detail && detail.classList.contains('detail-row')) {
            var visible = detail.classList.toggle('detail-visible');
            this.textContent = visible ? 'Hide Detail' : 'Show Detail';
            this.setAttribute('aria-expanded', String(visible));
        }
    });
});
</script>
</div>
</div>
{% endblock %}