<div class="carousel_size">
  <owl-carousel-o [options]="customOptions" class="d-flex">
    <ng-template carouselSlide *ngFor="let site of sites; index as i">
      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
      <ng-template #thenBlock
        ><div class="slide2 d-flex flex-column p-3">
          <h2 class="Ws-24">{{ site.name }}</h2>
          <div class="d-flex align-items-center mb-1">
            <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
            <span class="me-3 Tx-15">Abierto</span>
            <span class="ms-3 Tx-15">Cierra a las 21:00</span>
          </div>
          <p *ngIf="site.description" class="Tx-14">
            {{ site.description | truncate: [138, "..."] }}
          </p>
          <div class="d-flex blue-color">
            <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
            <span class="me-3 Tx-12">{{ site!.phone_number }}</span>
            <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
            <span class="Tx-12">{{ site!.email }}</span>
            <ion-icon (click)="showInformation(i)" class="icon-down ms-4" name="chevron-down-outline"></ion-icon>
          </div>
        </div></ng-template
      >
      <ng-template #elseBlock
        ><div
          class="slide d-flex flex-column justify-content-between"
          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
        >
          <div class="d-flex justify-content-end align-items-center mt-4">
            <span>5</span>
            <ion-icon
              name="star-half-outline"
              class="me-3 icon-star"
            ></ion-icon>
          </div>
          <div
            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
          >
            <i>{{ site!.name }}</i>
            <ion-icon
              (click)="showInformation(i)"
              name="chevron-up-outline"
              class="me-3 icon-up"
            ></ion-icon>
          </div></div
      ></ng-template>
    </ng-template>
  </owl-carousel-o>
</div>

<!--
  worsans 24
  source 18
 -->