{% extends "base.html" %}
{% from "cards.html" import card %}
{% block title %}{{ marketplace.title }} - Plugin Marketplace{% endblock %}
{% block sidebar %}
<div class="sidebar-label">Explorer</div>
<button class="sidebar-link filter-all filter-active" type="button" aria-pressed="true"><span aria-hidden="true">▦</span> All plugins <span class="nav-count">{{ marketplace.plugins | length }}</span></button>
{% if categories %}
<div class="sidebar-section">
    <div class="sidebar-label">Categories</div>
    {% for cat in categories %}
    <button type="button" class="sidebar-link filter-btn" data-filter-type="category" data-filter-value="{{ cat }}" aria-pressed="false"><span class="nav-dot" aria-hidden="true"></span>{{ cat }}<span class="nav-count">{{ marketplace.plugins | selectattr('category', 'equalto', cat) | list | length }}</span></button>
    {% endfor %}
</div>
{% endif %}
{% if tool_types %}
<div class="sidebar-section">
    <div class="sidebar-label">Components</div>
    {% for tool in tool_types %}
    <button type="button" class="sidebar-link filter-btn" data-filter-type="tool" data-filter-value="{{ tool.key }}" aria-pressed="false"><span class="filter-checkbox" aria-hidden="true"></span>{{ tool.label }}</button>
    {% endfor %}
</div>
{% endif %}
{% endblock %}
{% block content %}
<section class="catalog-heading">
    <div><div class="eyebrow">Plugin registry</div><h1>Extend your workspace<span class="accent-period">.</span></h1><p class="marketplace-description">{{ marketplace.description or 'Explore the skills and tools available to your agent.' }}</p></div>
    <div class="catalog-total"><strong>{{ marketplace.plugins | length }}</strong><span>plugins in catalog</span></div>
</section>
<div class="catalog-toolbar">
    <div class="search-section"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg><label class="sr-only" for="plugin-search">Search plugins</label><input type="search" id="plugin-search" class="search-input" placeholder="Search plugins, tools, or keywords…" autocomplete="off"><kbd>/</kbd></div>
    <label class="sort-label"><span class="sr-only">Sort plugins</span><select id="plugin-sort"><option value="default">Marketplace order</option><option value="name">Name: A–Z</option></select></label>
    <div class="view-switch" aria-label="View mode"><button type="button" class="view-btn active" data-view="list" aria-label="List view" aria-pressed="true">☰</button><button type="button" class="view-btn" data-view="grid" aria-label="Grid view" aria-pressed="false">▦</button></div>
</div>
{% if tags %}
<details class="tag-filters"><summary>Filter by tag <span>{{ tags | length }}</span></summary><div class="tag-filter-list">{% for tag in tags %}<button type="button" class="badge badge-tag filter-btn" data-filter-type="tag" data-filter-value="{{ tag }}" aria-pressed="false">{{ tag }}</button>{% endfor %}</div></details>
{% endif %}
<div id="active-filters" class="active-filters" aria-label="Selected filters" hidden></div>
<div class="results-toolbar"><div><span class="section-label">Plugins</span><span id="result-count" role="status" aria-live="polite">{{ marketplace.plugins | length }} results</span></div><button type="button" class="reset-filters" hidden>Clear filters <span aria-hidden="true">×</span></button></div>
<section class="plugin-grid" id="plugin-grid" data-view="list" aria-label="Plugins">
{% for plugin in marketplace.plugins %}{{ card(plugin) }}{% endfor %}
</section>
<div id="empty-state" class="empty-state" hidden><span class="empty-symbol" aria-hidden="true">[ ∅ ]</span><h2>No matching plugins</h2><p>Try a different search or clear the selected filters.</p><button type="button" class="reset-filters link-button">Clear filters</button></div>
<div class="catalog-end"><span aria-hidden="true">└─</span> End of catalog <span class="catalog-end-line"></span><span>{{ marketplace.name }}</span></div>
{% endblock %}
{% block scripts %}<script src="static/catalog.js"></script>{% endblock %}