<div>
  <section
    class="sites__header-sites d-flex flex-row justify-content-between align-items-center"
  >
    <div class="d-flex align-items-center ps-2">
      <button class="button-only-icon mr-0 d-flex align-items-center" (click)="changeModeList()">
        <ion-icon class="icon-grid" name="grid-outline"></ion-icon>
      </button>
      <button class="button-only-icon ml-0 d-flex align-items-center" (click)="changeModeSlide()">
        <ion-icon class="icon-menu" name="reorder-four-outline"></ion-icon>
      </button>
    </div>
    <p class="text-center m-0">Todos los sitios</p>
    <div class="pe-2">
      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
    </div>
  </section>
  <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
    <app-slide-sites (emitAllyId)="handlePatternAllyId($event)" style="width:100%;" ></app-slide-sites>
  </div>
  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
    <app-list-sites [sites]="sites" (emitAllyId)="handlePatternAllyId($event)"></app-list-sites>
  </div>
</div>