{# The search box, in the two places a product shows one.

   The header carries it on every screen and the search page carries a
   larger copy of the same thing, so the field lives here rather than in
   both templates: two boxes that drifted apart would be two searches as
   far as a reader is concerned. The size is the only difference, and it is
   a class.

   The scope selector is inside the bordered field, not next to it. Where a
   search will look is part of the question being asked, and a control
   floating beside the box reads as a filter to apply afterwards, which is
   the wrong story and the one that gets ignored. A plain <select> is used
   on purpose: it is one element, every browser already knows how to open
   it with a keyboard, and nothing here has to reimplement that badly.

   It is left out entirely when there is nowhere to narrow to, since a
   product whose only option is everything gains nothing from a control
   with one entry in it.

   The strings the script shows are handed over as data attributes, because
   a message a reader sees has to come from the same catalogues as the rest
   of the page and a script cannot call gettext. The two holding a number
   or a term are translated with their own placeholder as the value, so the
   catalogue keeps one entry per sentence and the script gets the sentence
   back with the hole still in it. #}

{% macro texts(min_chars) -%}
data-search-min-chars="{{ min_chars }}"
data-text-prompt="{{ _('Type something to search for.') }}"
data-text-short="{{ _('Keep typing, a search needs at least %(count)s characters.', count=min_chars) }}"
data-text-searching="{{ _('Searching') }}"
data-text-count="{{ _('%(count)s matching items.', count='%(count)s') }}"
data-text-empty="{{ _('Nothing here matches %(term)s.', term='%(term)s') }}"
data-text-error="{{ _('The search did not answer. Try again in a moment.') }}"
data-text-fallback="{{ _('The search index is not answering, so these results come straight from the site and may be less complete.') }}"
data-text-none="{{ _('Nothing on this site can be searched right now.') }}"
{%- endmacro %}

{% macro field(prefix, term, scopes, current, panel=False, autofocus=False) -%}
<div class="search-box__field">
    {# Named for a screen reader and hidden from a sighted one, which has
       the placeholder and the shape of the control. A box whose only name
       is its placeholder has no name at all once somebody types in it. #}
    <label class="search-box__hidden-label" for="{{ prefix }}-q">{{ _('Search') }}</label>
    <input class="search-box__input" id="{{ prefix }}-q" type="search" name="q"
           value="{{ term }}" placeholder="{{ localized(config.SEARCH_PLACEHOLDER, _('Search this site')) }}"
           autocomplete="off"
           {%- if panel %} role="combobox" aria-autocomplete="list"
           aria-expanded="false" aria-controls="{{ prefix }}-panel"{% endif %}
           {%- if autofocus %} autofocus{% endif %}
           data-search-input>
    {% if scopes | length > 1 %}
    <span class="search-box__scope">
        <label class="search-box__hidden-label" for="{{ prefix }}-scope">{{ _('Where to search') }}</label>
        <select class="search-box__select" id="{{ prefix }}-scope" name="scope"
                data-search-scope>
            {% set offered = scopes | map(attribute='key') | list %}
            {%- if current and current not in offered %}
            {# The applied scope is not one this reader may pick, which is
               what a stale bookmark or a hand-edited address looks like.
               Without an option for it the browser selects the first, and
               the box would claim it searched everywhere while the server
               narrowed and found nothing. Neither the key nor a name is
               shown: the scope may be a course that has not been announced,
               and the box is not the place to confirm it exists. #}
            <option value="{{ current }}" selected>{{ _('A narrowed search') }}</option>
            {%- endif %}
            {% for option in scopes %}
            <option value="{{ option.key }}"{% if option.key == (current or '') %} selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
        </select>
    </span>
    {% endif %}
    <button class="search-box__submit" type="submit">
        <span class="search-box__hidden-label">{{ _('Search') }}</span>
        <svg class="search-box__icon" viewBox="0 0 24 24" width="18" height="18"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round"
             aria-hidden="true" focusable="false">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
    </button>
</div>
{%- endmacro %}