{# The search screen.

   Rendered whole, every time, with a plain GET form. The field is the same
   one the header carries, a size larger, so the scope a reader picked up
   there is still in front of them here and still says the same thing.
   Whatever the script does, this is the version that has to be right: it
   is what a reader without JavaScript, and every crawler and reading mode,
   actually gets. #}

{% extends "public_base.html" %}
{% import "search/_box.html" as box with context %}

{% block title %}{{ _('Search') }} · {{ site.name }}{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=site.name, title=_('Search'),
                    subtitle=_('Everything on this site, from one box.')) }}
{% endblock %}

{% block content %}
<div class="container section">

    <form class="search-box search-box--page" method="get" role="search"
          action="{{ url_for('search.index') }}"
          data-search-form
          data-search-endpoint="{{ url_for('search.results') }}"
          {{ box.texts(min_chars) }}>
        {{ box.field('search-page', term, answer.scopes, answer.scope, autofocus=True) }}
    </form>

    <p class="search-status" role="status" aria-live="polite" data-search-status>
        {%- if not term -%}
            {{ _('Type something to search for.') }}
        {%- elif term|length < min_chars -%}
            {{ _('Keep typing, a search needs at least %(count)s characters.', count=min_chars) }}
        {%- elif answer.total == 0 -%}
            {{ _('Nothing here matches %(term)s.', term=term) }}
        {%- else -%}
            {{ _('%(count)s matching items.', count=answer.total) }}
        {%- endif -%}
    </p>

    <p class="search-note" data-search-note>
        {%- if answer.engine == 'fallback' -%}
            {{ _('The search index is not answering, so these results come straight from the site and may be less complete.') }}
        {%- elif answer.engine == 'none' and term and term|length >= min_chars -%}
            {{ _('Nothing on this site can be searched right now.') }}
        {%- endif -%}
    </p>

    <div class="search-results" data-search-results>
        {% for group in answer.groups %}
        <section class="search-group">
            <h2 class="search-group__title">{{ group.label }}</h2>
            <ul class="search-group__list">
                {% for result in group.results %}
                <li class="search-result">
                    <a class="search-result__title" href="{{ result.url }}">{{ result.title }}</a>
                    {% if result.snippet %}<p class="search-result__snippet">{{ result.snippet }}</p>{% endif %}
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endfor %}
    </div>

</div>
{% endblock %}