{% load i18n %}
{% comment %}
  Search/filter input for a sectioned-page rail (settings,
  administration, …). Lives inside an Alpine ``x-data="{ q: '' }"``
  scope provided by the caller; the rail rows toggle ``d-none`` based
  on ``q`` matched against their ``data-search`` haystack, and empty
  groups collapse via the ``.cj-rail-group`` CSS ``:has()`` rule.

  A clear (✕) button appears once something is typed and resets ``q``.

  Caller may pass ``placeholder`` for a context-specific prompt.
{% endcomment %}
{% translate "Filter…" as default_placeholder %}
<div class="cj-rail-filter mb-3">
    <i class="ti ti-search cj-rail-filter__icon text-secondary"></i>
    <input type="text"
           class="form-control form-control-sm cj-rail-filter__input"
           x-model="q"
           autocomplete="off"
           placeholder="{{ placeholder|default:default_placeholder }}"
           aria-label="{{ placeholder|default:default_placeholder }}">
    <a role="button"
       class="cj-rail-filter__clear text-secondary"
       x-show="q"
       x-cloak
       @click="q = ''"
       title="{% translate 'Clear' %}"
       aria-label="{% translate 'Clear' %}">
        <i class="ti ti-x"></i>
    </a>
</div>