<ion-content [scrollEvents]="true" (ionScroll)="getScrollPos($event.detail.scrollTop)">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div #mySlides *ngIf="imageSlides && !flagSearch">
    <ion-slides pager [options]="slideOptsOne" style="height: 100%; background-color: #f4802a;" >
      <ion-slide *ngFor="let image of imageSlides;" style="width: 100%; height: 100%;">
          <ion-button href="{{image.promotionLink}}" target="_blank" style="width: 100%; height: 100%;" fill="clear">
            <img src="{{image.imageLink}}" style="object-fit: resize; width: auto !important; border-radius: 15px !important;"/>
          </ion-button>
      </ion-slide>
    </ion-slides>
  </div>

  <ion-searchbar #mySearchbar placeholder="Cerca un prodotto"
    (ionChange)="searchProduct($event)"
  ></ion-searchbar>

  <ion-list *ngIf="deals.length > 0" >
        <ion-item>
          <ion-icon name="filter-circle-outline"></ion-icon>
          <ion-label style="display:none;">Filtra Offerte</ion-label>
          <ion-select placeholder="Filtra Offerte" color="black" #D (ionChange)="filterDeal(D.value)" interface="action-sheet">
            <ion-select-option value="0">
              Nessun Filtro
            </ion-select-option>
            <ion-select-option value="1">
              Solo Codici
            </ion-select-option>
            <ion-select-option value="2">
              Solo Offerte
            </ion-select-option>
            <ion-select-option value="3">
              Minimi Storici
            </ion-select-option>
            <ion-select-option value="4">
              A meno di 20€
            </ion-select-option>
            <ion-select-option value="5">
             Tra 20 - 50€
            </ion-select-option>
            <ion-select-option value="6">
              Tra 50 - 100€
             </ion-select-option>
            <ion-select-option value="7">
              100€ e più
            </ion-select-option>
          </ion-select>
        </ion-item>


      <!-- deals/1/detail -->
     <ion-item *ngFor="let deal of deals;">
        <ion-grid>
          <ion-card>
            <ion-row>
              <ion-col class="immagineProdottoContainer">
                <img class="immagineProdotto"src="{{deal.imageLink2}}" style="object-fit: resize; width: auto !important;"/>
              </ion-col>
              <ion-col>
                <ion-card-subtitle medium>{{deal.productName | slice:0:60}}...</ion-card-subtitle>
                <ion-label><s>{{deal.startPrice}}</s></ion-label>
                <ion-label><h1><strong>{{deal.finalPrice}}</strong></h1></ion-label>
                <ion-label style="margin-top: 1%;">{{deal.Date | date: "dd/MM/y"}}</ion-label>
              </ion-col>
            </ion-row>
            <ion-row style="display: flex; align-items: center; justify-content: center;">
              <ion-col>
                <ion-button href="{{deal.productLink5}}" target="_blank" color="gosu" style="width: 100%; margin:auto">
                  <ion-icon name="enter-outline" style="color: white"></ion-icon><a style="margin-left: 3%; color: white !important">VAI ALL'OFFERTA</a>
                </ion-button>
                <ion-button (click)="shareDeal(deal)" target="_blank" color="mania"  style="width: 100%; margin:auto; margin-top: 2% !important;">
                  <ion-icon name="share-social-outline" style="color: white"></ion-icon><a style="margin-left: 3%; color:white !important">CONDIVIDI L'OFFERTA</a>
                </ion-button>
              </ion-col>
            </ion-row>
            <ion-row *ngIf="deal.discountCodeSingle" style="text-align:center;">
              <ion-col style="text-align:center;">
                <ion-button (click)="CopyText(deal.discountCodeSingle)" color="success" style="height: 100%; padding-bottom: 2%; width: 100%;">
                  <ion-icon name="copy-outline" style="color: white"></ion-icon>
                  <div style="margin-left: 3%; color:white !important">
                    COPIA IL CODICE SCONTO
                    <br/>
                   <em>{{deal.discountCodeSingle}}</em>
                  </div>
                </ion-button>
              </ion-col>
            </ion-row>
              <ion-row *ngIf="deal.textExtra"  style="text-align:center;">
                <ion-col *ngIf="deal.textExtra.length > 1" style="text-align:center;">
                  <p style="border-style:dotted; padding:2%; background-color: lightblue; color:black;">
                    {{deal.textExtra}}
                  </p>
                </ion-col>
              </ion-row>
            <div *ngIf="!(deal.Date == today)" style="text-align:center;">
                <p style="border-radius: 15px; background-color: lightyellow; margin: 2%; color: black; padding: 2%;">
                  ⚠️L'offerta non è di oggi, quindi potrebbe essere terminata!
                </p>
            </div>

          </ion-card>
        </ion-grid>
     </ion-item>

  </ion-list>
  <div *ngIf="showNotFound" style="margin-top: 50%; text-align: center;">
    <p>
      Nessuna offerta trovata
    </p>
  </div>
  <ion-spinner *ngIf="deals.length === 0 && !showNotFound" name="dots" style="margin-top: 50%;"></ion-spinner>




  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
<ion-button *ngIf="isShow" (click)="scrollContent('top')" fill="clear" style="position: absolute; right:2%; bottom:2%; opacity: 90%; size: 350% !important;">
  <ion-icon style="font-size: 250% !important; color:white !important;  background-color:#1a1aa8 !important; border-radius: 50% !important;"  name="arrow-up"></ion-icon>
</ion-button>