doneit-web/src/app/pages/search/search.page.html

<!-- HEADER-->
<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
  <ion-form>
    <div class="d-flex search-input-container" >
      <div class="icon" (click)="basicSearch()">
        <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
      </div>
      <div class="input-text d-flex ion-align-items-center">
        <ion-input [(ngModel)]='searchSubject' class="search-input" type="search" placeholder="Pesquisar"></ion-input>
      </div>
      <div class="icon" (click)="clearSearchInput()">
        <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
      </div>
    </div>
  </ion-form>
  <div class="icon-z icon-most-searched-word-open">
    <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
  </div>
  <div class="profile">
    <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
  </div>
</ion-header>

<ion-content class="content">

    <!-- search result categories-->
    <div class="options">
      <div class="container ion-justify-content-between ion-align-items-center">
        <div class="d-flex ion-justify-content-center ion-text-center">
          <div *ngFor="let category of searchCategories" class="button">
            <p>{{ category.Name }}</p>
            <ion-label class="label">{{ category.Qtd }}</ion-label>
          </div>
        </div>
        <div class="icon-z icon-most-searched-word-open">
          <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
        </div>
      </div>

    </div>

    <div class="d-flex ion-wrap word-searh-result-container">
      <!-- most searched word-->

      <div class="most-searched-words" *ngIf="!showDocuments">
        <p class="title ion-text-center">Palavras mais pesquisadas</p>
      </div>
      
      <!-- search result document-->
      <div class="search-result" *ngIf="showDocuments">
        <div class="header">
          <div class="d-flex ion-justify-content-between ion-align-items-center">
            <div class="d-flex sort-by ion-justify-content-center">
              <p><span class="order">Order por:</span><span class="order-labal">Mais Recente</span></p>
            </div>
            <div>
              <ion-icon src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
            </div>
          </div>
        </div>
        <ul>
          <li *ngFor="let searchDocument of searchDocuments" class="d-flex">
            <div class="icon">
              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
            </div>
            <div class="content ion-align-items-center">
              <p class="result-name">{{ searchDocument.Assunto}}</p>
              <div class="d-flex ion-justify-content-between ">
                <span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
                <span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>

</ion-content>