{% extends "base.html" %}

{% block title %}{{ marketplace.name }} - Plugin Marketplace{% endblock %}

{% block content %}
<section class="marketplace-info">
    {% if marketplace.description %}
    <p class="marketplace-description">{{ marketplace.description }}</p>
    {% endif %}
    <div class="marketplace-meta">
        <span class="meta-item">Owner: <strong>{{ marketplace.owner.name }}</strong></span>
        <span class="meta-item">Plugins: <strong>{{ marketplace.plugins | length }}</strong></span>
    </div>
</section>

<section class="search-section">
    <input type="text" id="plugin-search" class="search-input" placeholder="Search plugins..." autocomplete="off">
</section>

{% if categories %}
<section class="filter-section">
    <span class="filter-label">Categories:</span>
    {% for cat in categories %}
    <button type="button" class="badge badge-category filter-btn" data-filter-type="category" data-filter-value="{{ cat }}">{{ cat }}</button>
    {% endfor %}
</section>
{% endif %}

{% if tags %}
<section class="filter-section">
    <span class="filter-label">Tags:</span>
    {% for tag in tags %}
    <button type="button" class="badge badge-tag filter-btn" data-filter-type="tag" data-filter-value="{{ tag }}">{{ tag }}</button>
    {% endfor %}
</section>
{% endif %}

{% if tool_types %}
<section class="filter-section">
    <span class="filter-label">Tools:</span>
    {% for tool in tool_types %}
    <button type="button" class="badge badge-{{ tool.css_class }} filter-btn" data-filter-type="tool" data-filter-value="{{ tool.key }}">{{ tool.label }}</button>
    {% endfor %}
</section>
{% endif %}

<section class="plugin-grid" id="plugin-grid">
    {% for plugin in marketplace.plugins %}
    <article class="plugin-card" data-name="{{ plugin.name }}" data-description="{{ plugin.description or '' }}" data-category="{{ plugin.category or '' }}" data-tags="{{ plugin.tags | join(' ') }}" data-keywords="{{ plugin.keywords | join(' ') }}" data-tools="{% if plugin.components.skills %}skills {% endif %}{% if plugin.components.commands %}commands {% endif %}{% if plugin.components.agents %}agents {% endif %}{% if plugin.components.hooks %}hooks {% endif %}{% if plugin.components.mcp_servers %}mcp {% endif %}{% if plugin.components.lsp_servers %}lsp {% endif %}">
        <a href="plugins/{{ plugin.name }}/index.html" class="card-link">
            <div class="card-body">
                <h2 class="card-title">{{ plugin.name }}</h2>
                {% if plugin.description %}
                <p class="card-description">{{ plugin.description }}</p>
                {% endif %}
                <div class="card-badges">
                    {% if plugin.category %}
                    <span class="badge badge-category">{{ plugin.category }}</span>
                    {% endif %}
                    {% if plugin.components.skills %}
                    <span class="badge badge-skills">Skills</span>
                    {% endif %}
                    {% if plugin.components.commands %}
                    <span class="badge badge-commands">Commands</span>
                    {% endif %}
                    {% if plugin.components.agents %}
                    <span class="badge badge-agents">Agents</span>
                    {% endif %}
                    {% if plugin.components.hooks %}
                    <span class="badge badge-hooks">Hooks</span>
                    {% endif %}
                    {% if plugin.components.mcp_servers %}
                    <span class="badge badge-mcp">MCP</span>
                    {% endif %}
                    {% if plugin.components.lsp_servers %}
                    <span class="badge badge-lsp">LSP</span>
                    {% endif %}
                </div>
            </div>
            <div class="card-footer">
                {% if plugin.author %}
                <span class="card-author">{{ plugin.author.name }}</span>
                {% endif %}
                {% if plugin.version %}
                <span class="card-version">v{{ plugin.version }}</span>
                {% endif %}
            </div>
        </a>
    </article>
    {% endfor %}
</section>

<script>
(function() {
    var input = document.getElementById('plugin-search');
    var grid = document.getElementById('plugin-grid');
    if (!input || !grid) return;
    var cards = grid.querySelectorAll('.plugin-card');
    var filterBtns = document.querySelectorAll('.filter-btn');
    var activeFilter = { type: null, value: null };

    function applyFilters() {
        var q = input.value.toLowerCase();
        cards.forEach(function(card) {
            var text = (card.dataset.name + ' ' + card.dataset.description + ' ' + card.dataset.category + ' ' + card.dataset.tags + ' ' + card.dataset.keywords).toLowerCase();
            var matchSearch = !q || text.indexOf(q) !== -1;
            var matchFilter = true;
            if (activeFilter.type === 'category') {
                matchFilter = card.dataset.category === activeFilter.value;
            } else if (activeFilter.type === 'tag') {
                matchFilter = (' ' + card.dataset.tags + ' ').indexOf(' ' + activeFilter.value + ' ') !== -1;
            } else if (activeFilter.type === 'tool') {
                matchFilter = (' ' + card.dataset.tools).indexOf(' ' + activeFilter.value + ' ') !== -1;
            }
            card.style.display = matchSearch && matchFilter ? '' : 'none';
        });
    }

    function setFilter(type, value) {
        filterBtns.forEach(function(b) { b.classList.remove('filter-active'); });
        activeFilter = { type: type, value: value };
        filterBtns.forEach(function(b) {
            if (b.dataset.filterType === type && b.dataset.filterValue === value) {
                b.classList.add('filter-active');
            }
        });
        applyFilters();
    }

    input.addEventListener('input', applyFilters);

    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var type = this.dataset.filterType;
            var value = this.dataset.filterValue;
            if (activeFilter.type === type && activeFilter.value === value) {
                activeFilter = { type: null, value: null };
                this.classList.remove('filter-active');
                history.replaceState(null, '', location.pathname);
            } else {
                setFilter(type, value);
                history.replaceState(null, '', '?'+ type + '=' + encodeURIComponent(value));
            }
            applyFilters();
        });
    });

    // Restore filter from URL params
    var params = new URLSearchParams(location.search);
    ['category', 'tag', 'tool'].forEach(function(type) {
        var value = params.get(type);
        if (value) { setFilter(type, value); }
    });
})();
</script>
{% endblock %}