{% extends "vantage/base.html" %}
{% load static vantage i18n %}

{% comment %}
  The no-JavaScript half of global search. Same querysets, same permission filtering,
  same caps as the palette — only the rendering differs.
{% endcomment %}

{% block head %}
  {% comment %}
    Also linked by the palette partial; a repeated href costs one cache hit. The
    results page must stay styled even where COMMAND_PALETTE is switched off.
  {% endcomment %}
  <link rel="stylesheet" href="{% static 'vantage/vantage-palette.css' %}">
{% endblock %}

{% block content %}
<div class="v-page-head">
  <div>
    <h1 class="v-page-title">{% translate "Search" context "page title, the noun" %}</h1>
    <p class="v-page-description">{% translate "Across every section you can open." %}</p>
  </div>
</div>

<form class="v-toolbar" method="get" role="search">
  <div class="v-search v-search-wide">
    {% icon "search" %}
    <input class="v-input" type="search" name="q" value="{{ query }}"
           placeholder="{% translate 'Search everything…' %}" aria-label="{% translate 'Search everything' %}" autofocus>
  </div>
  <button class="v-btn v-btn-primary" type="submit">{% translate "Search" context "button, the verb" %}</button>
  {% if query %}
    <a class="v-btn v-btn-ghost v-btn-sm" href="{{ request.path }}">{% translate "Clear" %}</a>
  {% endif %}
</form>

{% if query %}
  <p class="v-muted v-search-count" role="status">
    {% blocktranslate count counter=total %}{{ counter }} result for “{{ query }}”{% plural %}{{ counter }} results for “{{ query }}”{% endblocktranslate %}
  </p>
{% endif %}

{% for group in groups %}
  <section class="v-card v-search-group">
    <div class="v-card-head">
      <h2 class="v-card-title">{% icon group.icon %}{{ group.label }}</h2>
      <a class="v-btn v-btn-ghost v-btn-sm" href="{{ group.url }}">
        {% if group.truncated %}{% translate "See all" %}{% else %}{% translate "Open list" %}{% endif %}
      </a>
    </div>
    <ul class="v-search-hits">
      {% for hit in group.hits %}
        <li>
          <a href="{{ hit.url }}">
            <span class="v-search-hit-label">{{ hit.label }}</span>
            {% if hit.sublabel %}
              <span class="v-search-hit-sub">{{ hit.sublabel }}</span>
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </section>
{% empty %}
  <div class="v-empty">
    {% icon "search" class="v-empty-icon" %}
    {% if not query %}
      <p class="v-empty-title">{% translate "Search everything" %}</p>
      <p class="v-empty-body">
        {% blocktranslate trimmed %}
          Type at least {{ min_length }} characters to look across every section you
          have access to.
        {% endblocktranslate %}
      </p>
    {% elif query|length < min_length %}
      <p class="v-empty-title">{% translate "Keep typing" %}</p>
      <p class="v-empty-body">{% blocktranslate %}A search needs at least {{ min_length }} characters.{% endblocktranslate %}</p>
    {% else %}
      <p class="v-empty-title">{% blocktranslate %}No matches for “{{ query }}”{% endblocktranslate %}</p>
      <p class="v-empty-body">{% translate "Nothing you can open matches that. Try fewer words." %}</p>
    {% endif %}
  </div>
{% endfor %}
{% endblock %}