<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 justify-content-between"
        >
          <div class="d-flex justify-content-end align-items-center mt-4">
            <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 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
 -->