{# @description The list-page search box and its submit button, wired to the shared filter form. #}
{# @prop placeholder:text | default:"Search" | description:"Placeholder and accessible label text for the search input." #}
{# @prop label:text | default:"Search" | description:"Text for the search submit button." #}
{% load i18n %}
<c-vars placeholder="{% trans "Search" %}"
        label="{% trans "Search" %}" />
{% if is_searchable %}
  <div class="join grow">
    <c-form.field type="text"
                  label=""
                  name="q"
                  form="filterForm"
                  class="join-item grow md:w-[220px] input-sm"
                  placeholder="{{ placeholder }}"
                  value="{{ search_query|default:'' }}"
                  aria-label="{{ placeholder }}">
      <c-slot name="prelabel">
        <c-icon name="search" />
      </c-slot>
    </c-form.field>
    <c-button type="submit"
              class="join-item"
              size="sm"
              form="filterForm"
              text="{{ label }}" />
  </div>
{% endif %}