<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=""></div>
    </div>
    <div (click)="handlePatternAllyId(site!.id)" class="info-container">
      <div class="title d-flex justify-content-between align-items-center">
        <h2>{{site!.name}}</h2>
        <div>
          <i
            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
          /></i>
        </div>
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
          <span class="me-4">Abierto</span>
          <span>Cierra a las 21:00</span>
        </div>
        <ion-icon size="large" name="people-outline"></ion-icon>
      </div>
      <p>
        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">
        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
        <span class="me-3">{{site!.phone_number}}</span>
        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
        <span>{{site!.email}}</span>
      </div>
    </div>
  </li>
</ul>