{% extends "public_base.html" %}
{% import "marketplace/_macros.html" as mk %}

{% block title %}{{ _("Marketplace") }}{% endblock %}

{# A search or a filter is a reader already at work: the hero shrinks to
   the search box, so the results start near the top of a phone. #}
{% set filtering = query or archetype or category %}

{% block hero %}
<section class="store-hero{% if filtering %} store-hero--slim store-hero--searching{% endif %}">
    <div class="container">
        <h1 class="store-hero__title">{{ _("The SPLENT feature marketplace") }}</h1>
        {% if not filtering %}<p class="store-hero__subtitle">{{ _("Reusable, contract-verified features you can install into any SPLENT product with one command.") }}</p>{% endif %}
        <form class="store-search" method="get" action="{{ url_for('marketplace.index') }}" role="search">
            {% if archetype %}<input type="hidden" name="archetype" value="{{ archetype }}">{% endif %}
            {% if category %}<input type="hidden" name="category" value="{{ category }}">{% endif %}
            <input class="store-search__input" type="search" name="q" value="{{ query }}"
                   placeholder="{{ _('Search features') }}"
                   aria-label="{{ _('Search features') }}" autocomplete="off">
            <button class="store-search__btn" type="submit" aria-label="{{ _('Search') }}">{{ mk.icon("search", 18) }}<span class="store-search__label">{{ _("Search") }}</span></button>
        </form>
        {% if not filtering %}
        <p class="store-hero__stats">
            <span><strong>{{ total_features }}</strong> {{ ngettext("feature", "features", total_features) }}</span>
            <span class="store-dot" aria-hidden="true">·</span>
            <a class="store-hero__statlink" href="{{ url_for('marketplace.spls') }}"><strong>{{ total_spls }}</strong> {{ ngettext("product line", "product lines", total_spls) }}</a>
        </p>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block content %}
<div class="container store-toolbar">
    <div class="store-chiprow">
        <span class="store-chiprow__label">{{ _("Archetype") }}</span>
        <a class="store-chip {{ 'is-active' if not archetype }}"
           href="{{ url_for('marketplace.index', q=query or None, category=category) }}">{{ _("All") }}</a>
        {% for a in archetypes %}
        <a class="store-chip {{ 'is-active' if a == archetype }}"
           href="{{ url_for('marketplace.index', q=query or None, archetype=a, category=category) }}">{{ a }}</a>
        {% endfor %}
    </div>
    {% if categories %}
    <div class="store-chiprow">
        <span class="store-chiprow__label">{{ _("Category") }}</span>
        <a class="store-chip {{ 'is-active' if not category }}"
           href="{{ url_for('marketplace.index', q=query or None, archetype=archetype) }}">{{ _("All") }}</a>
        {% for c in categories %}
        <a class="store-chip {{ 'is-active' if c == category }}"
           href="{{ url_for('marketplace.index', q=query or None, archetype=archetype, category=c) }}">{{ c }}</a>
        {% endfor %}
    </div>
    {% endif %}

    <p class="store-resultline">
        {{ ngettext("%(num)d feature", "%(num)d features", features|length) }}{% if query %} · “{{ query }}”{% endif %}
        {% if query or archetype or category %} · <a href="{{ url_for('marketplace.index') }}">{{ _("Clear filters") }}</a>{% endif %}
    </p>
</div>

<div class="container">
    {% if features %}
    <div class="store-grid">
        {% for f in features %}
        <a class="store-card" href="{{ url_for('marketplace.detail', short=f.short) }}">
            <div class="store-card__top">
                {{ mk.monogram(f.short) }}
                <div class="store-card__idline">
                    <span class="store-card__name">{{ f.short }}</span>
                    <span class="store-card__badges">
                        {{ mk.version_pill(f) }}
                        {{ mk.archetype_badge(f.archetype) }}
                    </span>
                </div>
            </div>
            <p class="store-card__desc">{{ f.description or _("No description yet.") }}</p>
            <div class="store-card__meta">
                {# Two independent axes. Every indexed feature has a git tag,
                   which the version pill above already shows; PyPI is
                   separate, and a "published": false dict is still truthy,
                   which used to mark everything as on PyPI. #}
                {% if f.pypi and f.pypi.published %}
                <span class="store-meta-item store-meta-item--ok">{{ mk.icon("check-circle", 14) }}PyPI</span>
                {% else %}
                <span class="store-meta-item">{{ mk.icon("git-branch", 14) }}{{ _("source only") }}</span>
                {% endif %}
                {% if f.used_by %}
                <span class="store-meta-item">{{ mk.icon("users", 14) }}{{ _("used by %(count)d", count=f.used_by|length) }}</span>
                {% endif %}
                {% if f.category %}
                <span class="store-meta-item">{{ mk.icon("folder", 14) }}{{ f.category }}</span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="store-empty">
        {{ mk.icon("search", 34) }}
        <p>{{ _("No features match your search.") }}</p>
        <a href="{{ url_for('marketplace.index') }}">{{ _("Clear filters") }}</a>
    </div>
    {% endif %}
</div>
{% endblock %}