<div>
  <section
    class="sites__header-sites d-flex flex-row justify-content-between align-items-center"
  >
    <div class="d-flex flex-row align-items-center ps-2">
      <button class="button-only-icon mr-0" (click)="changeModeList()">
        <ion-icon name="grid-outline"></ion-icon>
      </button>
      <button class="button-only-icon ml-0" (click)="changeModeSlide()">
        <ion-icon name="menu-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 style="width:100%;" ></app-slide-sites>
  </div>
  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
    <app-list-sites ></app-list-sites>
  </div>

</div>