<ul
  class="
    p-3
    d-flex
    flex-column
    list__gap
    align-items-center
    justify-content-center
    container
  "
>
  <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
    <div class="img-container ps-1 me-5">
      <div
        class=""
        [ngStyle]="{ 'background-image': 'url(https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg)' }"
      ></div>
    </div>
    <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
      <div class="title d-flex justify-content-between align-items-center">
        <h2 class="Ws-24">{{ site!.name }}</h2>
        <div class="score-icon">
          <ion-icon name="star-outline"></ion-icon>
          <ion-icon name="star-outline"></ion-icon>
          <ion-icon name="star-outline"></ion-icon>
          <ion-icon name="star-outline"></ion-icon>
          <ion-icon name="star-outline"></ion-icon>
        </div>
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center Tx-15">
          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
          <span class="me-4 open">Abierto</span>
          <span>Cierra a las 21:00</span>
        </div>
        <ion-icon class="user-icon" name="people-outline"></ion-icon>
      </div>
      <div class="d-flex align-items-center Tx-15 mt-2">
        <span class="me-4">Direccion: Carrera 4AN-35 Centro</span>
        <span class="ms-5">Pamplona</span>
      </div>
      <p class="Tx-14 mt-2">
        El restaurante gouls ofrece platos tradicionales con toques de
        modernidad, aprovechando los productos de la zona (excelentes carnes,
        salazones). combinandolos con nuevos sabores y texturas.
      </p>
      <div class="d-flex align-items-center Tx-15 blue-color">
        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
        <span class="me-3">{{ site!.phone_number }}</span>
        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
        <span>{{ site!.email }}</span>
      </div>
    </div>
  </li>
</ul>

<div class="d-flex align-items-center justify-content-center">
  <div
    style="width: 50%"
    class="d-flex align-items-center justify-content-center"
  >
    <button
      (click)="retroceder()"
      class="d-flex align-items-center justify-content-center"
    >
      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
    </button>
    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
      <div *ngIf="i == pageSelect; else elseBlock">
        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
      </div>
      <ng-template #elseBlock
        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
      >
    </ng-template>
    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
    <button
      (click)="avanzar()"
      class="d-flex align-items-center justify-content-center"
    >
      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
    </button>
  </div>
</div>