<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(' + site.url + ')'}"></div>
    </div>
    <div (click)="handlePatternAllyId(site!.id)" 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>