<section class="home-section home-section--search" id="search">
  <h2 class="visually-hidden">
    {{ 'Home.Search.Title' | translate }}
  </h2>

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
        <form #searchForm="ngForm" (ngSubmit)="search(searchForm)">
          <div class="input-group" role="search">
            <!-- search field -->
            <input
              type="text"
              class="form-control input--search"
              placeholder="{{ 'Datasets.SearchFor' | translate }}..."
              [attr.aria-label]="'Datasets.SearchFor' | translate"
              [maxLength]="maxLength"
              ngModel
              name="query" />

            <!-- perform search -->
            <span class="input-group-append">
              <button class="btn btn--search" type="submit">
                <svg class="icon icon-magnifying-glass" role="img" aria-hidden="true">
                  <use href="/assets/icomoon/sprite/sprite.svg#icon-magnifying-glass"></use>
                </svg>
                <span class="visually-hidden">
                  {{ 'Action.Search' | translate }}
                </span>
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
