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>
  <!-- Advance search -->
  <div *ngIf="!showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(true)">
    <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
  </div>
  <div *ngIf="showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="advanceSearch()" >
    <ion-icon src="assets/images/advance-search-show-modal.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="main-content">

    <!-- Advance search -->
    <div class="advance-search" *ngIf="showAdvanceSearch">
      <li class="d-flex date-container ion-justify-content-between">
        <div class="icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-datetime [(ngModel)]='searchDocumentDate' display-timezone="utc"></ion-datetime>
        </div>
      </li>
      <!-- Sender -->
      <li (click)="openAdvanceSearchSelection()" class="d-flex date-container ion-justify-content-between">
        <div class="icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-input [(ngModel)]='searchSender' class="search-input" type="search" placeholder="Remetentes"></ion-input>
        </div>
      </li>
      <!-- Organic entity -->
      <li class="d-flex date-container ion-justify-content-between">
        <div class="icon">
          <ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
        </div>
        <div class="input-container d-flex ion-align-items-center">
          <ion-input [(ngModel)]='searchOrganicEntiry'  class="search-input" type="search" placeholder="Entidade Orgânica"></ion-input>
        </div>
      </li>
    </div>

    <ion-content>
      <ion-slides pager="true" [options]="slideOpts">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 4</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 5</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 6</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 7</h1>
        </ion-slide>
      </ion-slides>
    </ion-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>