{% import "partials/language.html" as lang %}
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="search"></label>
  <div class="md-search__inner">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
      <label class="md-icon md-search__icon" for="search"></label>
      <button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#xE5CD;</button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="result" data-md-lang-search="{{ lang.t('search.languages') }}" data-md-lang-tokenizer="{{ lang.t('search.tokenizer') }}">
          <div class="md-search-result__meta" data-md-lang-result-none="{{ lang.t('search.result.none') }}" data-md-lang-result-one="{{ lang.t('search.result.one') }}" data-md-lang-result-other="{{ lang.t('search.result.other') }}">
            {{ lang.t("search.result.placeholder") }}
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
