{{#if searchWrapClass}}<div class="{{searchWrapClass}}">{{/if}}
  <form class="c-search-box{{#if displayStyle}} c-search-box--{{displayStyle}}{{/if}}">
    {{#if searchLabel}}<label for="input" class="c-search-box__label">{{ searchLabel }}</label>{{/if}}
    <div class="c-search-box__controls">
      <input type="search" id="input" class="c-search-box__input" placeholder="{{ searchPlaceholder }}"/>
      {{> button searchButton }}
    </div>
  </form>
{{#if searchWrapClass}}</div>{{/if}}

{{!-- TODO: Refactor this (see stylesheets/_components.search-box.scss) --}}
{{!--
<div class="c-search-box{{#if theme}} t-{{theme}}{{/if}}">
  <form class="c-form" action="#">
    <label for="{{id}}" class="c-form__label">{{label}}</label>
    <div class="c-form__field">
      <input id="{{id}}" class="c-form__control c-form__control--text" type="search" placeholder="{{placeholder}}">
      <button class="c-button c-button--icon-only c-button--no-border-radius" type="submit" aria-label="{{buttonText}}">
        <svg class="c-button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{basePath}}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </button>
    </div>
  </form>
</div>
--}}
