<div class="search">
  <div class="content">
    <h1 class="search__title">{{ 'SearchWithAutoComplete.Title' | translate }}</h1>
    <div class="search-controls">
      <i class="search-icon material-icons">search</i>
      <form class="search-form" name="search-form" (ngSubmit)="submit();">
        <ul (mouseenter)="projectListHoverStatusSwitch(true) "
            (mouseleave)="projectListHoverStatusSwitch(false); hideProjectList();"
            class="search-controls__project-list" [class.hidden]="isAutocompleteHidden">
          <li *ngFor="let project of projects" (click)="navigateToProject(project.id)"
              class="search-controls__project-item">
            <p class="project-name"><span [innerHtml]="markedText(project.name) | safeHtml"></span></p>
            <p class="project-info">{{ 'Countries.' + project.country | translate }}</p>
            <p class="project-info">{{ 'Categories.' + project.category | translate }}</p>
          </li>
        </ul>
        <input (focus)="searchInputFocusStatusSwitch(true); showProjectList();"
               (focusout)="searchInputFocusStatusSwitch(false); hideProjectList();"
               [class.search-controls__input_square]="squareInput && projects.length"
               [formControl]="inputSearch"
               placeholder="{{ 'SearchWithAutoComplete.Placeholder' | translate}}" type="text"
               class="search-controls__input">
        <input type="submit" value="{{ 'SearchWithAutoComplete.Search' |translate }}"
               class="main-btn search-controls__submit">
      </form>
    </div>
  </div>
</div>
