<div id="SearchDrawer" class="search-bar drawer drawer--top critical-hidden" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}" data-predictive-search-drawer>
  <div class="search-bar__interior">
    <div class="search-form__container" data-search-form-container>
      <form class="search-form search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input
            type="text"
            name="q"
            placeholder="{{ 'general.search.placeholder' | t }}"
            role="combobox"
            aria-autocomplete="list"
            aria-owns="predictive-search-results"
            aria-expanded="false"
            aria-label="{{ 'general.search.placeholder' | t }}"
            aria-haspopup="listbox"
            class="search-form__input search-bar__input"
            data-predictive-search-drawer-input
            data-base-url="{{ routes.search_url }}"
          />
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        </div>

        <button class="search-bar__submit search-form__submit"
          type="submit"
          data-search-form-submit>
          {% include 'icon-search' %}
          <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </form>

      <div class="search-bar__actions">
        <button type="button" class="btn--link search-bar__close js-drawer-close">
          {% include 'icon-close' %}
          <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
        </button>
      </div>
    </div>
  </div>
</div>
