{% extends "base.html" %}

{% block content %}
<section class="page-header">
    <div>
        <p class="page-kicker">Marketplace</p>
        <h1 class="page-title">Plugin marketplace</h1>
        <p class="page-subtitle">
            Discover, install, and review community plugins.
        </p>
    </div>
    <div class="chip-stack">
        <span class="chip">{{ total_plugins }} available</span>
        <span class="chip">{{ installed_names | length }} installed</span>
    </div>
</section>

{% if message %}
<section class="panel">
    <p class="organize-hint">{{ message }}</p>
</section>
{% endif %}

{% if error_message %}
<section class="panel">
    <p class="organize-hint">{{ error_message }}</p>
</section>
{% endif %}

<section class="panel">
    <form method="get" action="/ui/marketplace" class="settings-toolbar">
        <div class="form-group">
            <label for="marketplace-search">Search</label>
            <input
                id="marketplace-search"
                type="text"
                name="q"
                value="{{ query }}"
                placeholder="name, author, or description"
            >
        </div>
        <div class="form-group">
            <label for="marketplace-category">Category</label>
            <input
                id="marketplace-category"
                type="text"
                name="category"
                value="{{ category }}"
                placeholder="e.g. workflow, ai, metadata"
            >
        </div>
        <div class="form-group">
            <label for="marketplace-tags">Tags (comma separated)</label>
            <input
                id="marketplace-tags"
                type="text"
                name="tag"
                value="{{ tags | join(',') }}"
                placeholder="notes, productivity"
            >
        </div>
        <div class="settings-actions">
            <button class="btn-primary" type="submit">Search</button>
        </div>
    </form>
</section>

<section class="panel">
    {% if plugins %}
    <table class="history-table">
        <thead>
            <tr>
                <th>Plugin</th>
                <th>Version</th>
                <th>Author</th>
                <th>Category</th>
                <th>Rating</th>
                <th>Downloads</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="plugins-tbody">
            {% for plugin in plugins %}
            <tr>
                <td>
                    <strong>{{ plugin.name }}</strong><br>
                    <small>{{ plugin.description }}</small>
                </td>
                <td>{{ plugin.version }}</td>
                <td>{{ plugin.author }}</td>
                <td>{{ plugin.category }}</td>
                <td>{{ '%.1f' | format(plugin.rating) }}</td>
                <td>{{ plugin.downloads }}</td>
                <td>
                    <div class="action-group">
                        {% if plugin.name in installed_names %}
                        <button
                            class="btn-ghost"
                            hx-post="/ui/marketplace/plugins/{{ plugin.name }}/update"
                            hx-vals='{{ {"q": query, "category": category, "tag_csv": tags | join(","), "page": page, "per_page": per_page} | tojson }}'
                            hx-indicator="#update-spinner-{{ loop.index }}"
                            hx-disabled-elt="this">
                            Update
                        </button>
                        <div id="update-spinner-{{ loop.index }}" class="htmx-indicator spinner-inline"></div>
                        <button
                            class="btn-ghost"
                            hx-post="/ui/marketplace/plugins/{{ plugin.name }}/uninstall"
                            hx-vals='{{ {"q": query, "category": category, "tag_csv": tags | join(","), "page": page, "per_page": per_page} | tojson }}'
                            hx-indicator="#uninstall-spinner-{{ loop.index }}"
                            hx-disabled-elt="this">
                            Uninstall
                        </button>
                        <div id="uninstall-spinner-{{ loop.index }}" class="htmx-indicator spinner-inline"></div>
                        {% else %}
                        <button
                            class="btn-primary"
                            hx-post="/ui/marketplace/plugins/{{ plugin.name }}/install"
                            hx-vals='{{ {"q": query, "category": category, "tag_csv": tags | join(","), "page": page, "per_page": per_page} | tojson }}'
                            hx-indicator="#install-spinner-{{ loop.index }}"
                            hx-disabled-elt="this">
                            Install
                        </button>
                        <div id="install-spinner-{{ loop.index }}" class="htmx-indicator spinner-inline"></div>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination Controls -->
    {% if total_plugins > per_page %}
    <div class="pagination-controls">
        <div class="pagination-info">
            Page {{ page }} of {{ (total_plugins + per_page - 1) // per_page }}
            ({{ total_plugins }} total plugins)
        </div>
        <div class="pagination-buttons">
            {% if page > 1 %}
            <button
                class="btn-ghost"
                hx-get="/ui/marketplace?q={{ query | urlencode }}&category={{ category | urlencode }}&tag={{ tags | join(',') | urlencode }}&page={{ page - 1 }}&per_page={{ per_page }}"
                hx-target="#main"
                hx-swap="innerHTML">
                Previous
            </button>
            {% else %}
            <button class="btn-ghost" disabled>Previous</button>
            {% endif %}

            {% if page < (total_plugins + per_page - 1) // per_page %}
            <button
                class="btn-ghost"
                hx-get="/ui/marketplace?q={{ query | urlencode }}&category={{ category | urlencode }}&tag={{ tags | join(',') | urlencode }}&page={{ page + 1 }}&per_page={{ per_page }}"
                hx-target="#main"
                hx-swap="innerHTML">
                Next
            </button>
            {% else %}
            <button class="btn-ghost" disabled>Next</button>
            {% endif %}
        </div>
    </div>
    {% endif %}
    {% else %}
    <p class="organize-hint">No plugins match the current filters.</p>
    {% endif %}
</section>
{% endblock %}