{% load taxonomy %}{% load lang %}
<!-- The explorer: facets, count and results. Rendered whole by the home page
     and swapped in by the browser as the selection narrows, so both paths
     render the same markup and there is no second implementation in JS. -->
<!-- Collapsed on a phone, where five stacked groups used to fill the screen
     before a single result appeared. The summary carries the count, so a
     folded panel never hides that something is being filtered. Open by default
     once anything is active, and always open on a wide screen (CSS). -->
<details class="facet-panel" id="facetPanel" open
         data-active="{{ active_count }}">
    <summary class="facet-summary">
        {{ "Filters"|t }}{% if active_count %} <span class="facet-count">{{ active_count }}</span>{% endif %}
    </summary>
    <div class="facets">
        {% for facet in facets %}
        {% if facet.values %}
        <div class="facet-group" data-facet="{{ facet.param }}">
            <span class="facet-label">{{ facet.label|t }}</span>
            {% if facet.control == "menu" %}
            <!-- Unbounded axis: a menu stays one line however many there are,
                 and on a phone the system renders it, search included. -->
            <select class="facet-menu" data-param="{{ facet.param }}"
                    aria-label="{{ facet.label|t }}">
                <option value="">{{ "All"|t }}</option>
                {% for value in facet.values %}
                <option value="{{ value.0 }}"{% if value.0 in facet.active %} selected{% endif %}>{{ value.0|label }} ({{ value.1 }})</option>
                {% endfor %}
            </select>
            {% else %}
            <div class="facet-values">
                {% for value in facet.values %}
                <button type="button" class="chip" data-param="{{ facet.param }}"
                        data-value="{{ value.0 }}"
                        aria-pressed="{% if value.0 in facet.active %}true{% else %}false{% endif %}">{% if facet.translate %}{{ value.0|t }}{% else %}{{ value.0|label }}{% endif %}<span class="chip-count">{{ value.1 }}</span></button>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endif %}
        {% endfor %}
    </div>
</details>

<p class="count">
    {{ selection.total }} {% if selection.total > 1 %}{{ "results"|t }}{% else %}{{ "result"|t }}{% endif %}
    {% if selection.total > selection.pages|length %}
    <span class="count-capped">{{ "showing the first"|t }} {{ selection.pages|length }}</span>
    {% endif %}
    <span class="view-switch">
        <button type="button" class="chip" data-view="cards"
                aria-pressed="{% if view == 'cards' %}true{% else %}false{% endif %}">{{ "List"|t }}</button>
        <button type="button" class="chip" data-view="grid"
                aria-pressed="{% if view == 'grid' %}true{% else %}false{% endif %}">{{ "Grid"|t }}</button>
    </span>
</p>

{% if not cards %}
<p class="empty">{{ "No page matches this selection."|t }}</p>
{% elif view == "grid" %}
<ul class="tiles">
    {% for c in cards %}
    <li class="tile">
        <a href="{{ c.page.url }}"{% if c.is_document %} target="_blank" rel="noopener"{% endif %}>
            {% if c.page.kind == "image" %}
            <img class="tile-media" src="{{ c.page.file_url }}" alt="{{ c.page.title }}" loading="lazy">
            {% else %}
            <!-- A document names itself after its page: it has no relpath of
                 its own, several sharing the one of the page they sit by. -->
            <img class="tile-media" alt="{{ c.page.title }}" loading="lazy"
                 src="/thumb/{{ c.page.relpath }}/{% if c.is_document %}{{ c.page.file|urlencode }}/{% endif %}">
            {% endif %}
            <span class="tile-title">{{ c.title_html|safe }}</span>
        </a>
        {% if c.project %}<a class="tile-project" href="{{ c.project.url }}">{{ c.project.title }}</a>{% endif %}
    </li>
    {% endfor %}
</ul>
{% else %}
<ul class="cards">
    {% for c in cards %}
    <li class="card">
        <a class="card-title{% if c.is_document %} is-document{% endif %}"
           href="{{ c.page.url }}"{% if c.is_document %} target="_blank" rel="noopener"{% endif %}>{{ c.title_html|safe }}</a>
        {% if c.project %}<a class="card-project" href="{{ c.project.url }}">{{ c.project.title }}</a>{% endif %}
        <div class="card-meta">
            {% if c.is_document %}<span class="card-kind">{{ c.page.kind|t }}</span>{% endif %}
            <span class="card-path">{{ c.page.domain_label }} / {{ c.page.type_label }}</span>
            {% if c.page.display_date %}<span class="card-date">{{ c.page.display_date }}</span>{% endif %}
            {% if c.page.status %}<span class="badge-status" data-status="{{ c.page.status }}">{{ c.page.status }}</span>{% endif %}
            {% for t in c.page.tags %}<span class="tag">{{ t }}</span>{% endfor %}
        </div>
        {% if c.snippet %}<p class="card-snippet">{{ c.snippet|safe }}</p>
        {% elif c.page.summary %}<p class="card-summary">{{ c.page.summary }}</p>{% endif %}
    </li>
    {% endfor %}
</ul>
{% endif %}