<ion-content>
  <div class="head-title">

    <app-generic-header showImage="false" showBack="true" [headerText]="'itemforsale,offersdiscount' | translate">
    </app-generic-header>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>


  <div class="sales-items" *ngIf="segment =='1'">
    <ion-grid>
      <ion-row>

        <ion-col size="12">
          <ion-searchbar mode='md' (ionInput)="search($event.target.value)" style="--background: white; margin-top: 10px; padding-bottom: 20px;"></ion-searchbar>
          <!-- <ion-item lines="none" class="SearchtextBox">
            <ion-input [placeholder]="'itemforsale,search-items'| translate" [(ngModel)]="searchText"
              (ionInput)="search($event.target.value)"></ion-input>
          </ion-item> -->
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="10">
          <p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}}</p>
        </ion-col>
        <ion-col size="2" (click)="openModel()">
          <img class='filter' src="assets/imgs/itemsforsale/filter.svg">
        </ion-col>
      </ion-row>
    </ion-grid>

    <div class="container-icon" *ngIf="categories.length>0">
      <div class="box-icon" *ngFor="let key of categories">
        <div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
          <div class="top" [innerHTML]="key.content">
            <!-- <ion-icon name="images"></ion-icon> -->
            <!-- <span [innerHTML]="key.content"></span> -->
            <!-- <img [src]="key.content" /> -->
          </div>
          <div class="bottom-icon">
            <p *ngIf="direction =='ltr'">{{key.categoryName_en}}</p>
            <p *ngIf="direction =='rtl'">{{key.categoryName_ar}}</p>
          </div>
        </div>
      </div>

    </div>


    <div class="grid-container">
      <ion-row *ngIf="isData">
        <ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
          <ion-card class="offers-discount-card">
            <ion-card-header>
              <!-- <img [src]="item.Banner_Image" /> -->
              <div class="header-img" [ngStyle]="{'background-image': 'url(' + item.Banner_Image + ')'}"></div>
              <ion-card-title *ngIf='direction === "ltr"'>{{item.Title}}</ion-card-title>
              <ion-card-title *ngIf='direction === "rtl"'>{{item.Title_AR}}</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <div *ngIf='direction === "ltr"' style="min-height: 60px; max-height: 100%;" [innerHTML]="getDotted(item.Description)"></div>
              <div *ngIf='direction === "rtl"' style="min-height: 60px; max-height: 100%;" [innerHTML]="getDotted(item.Description_AR)"></div>
              <div class="dark offers-title">
                {{item.Discount}}
              </div>
              <ion-row [class]="checkDate(item['End Date']) ==true ? 'green' : 'red'">
                <ion-col size="10" *ngIf="checkDate(item['End Date']) ==true">
                  <p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p>
                </ion-col>
                <ion-col size="10" *ngIf="checkDate(item['End Date']) ==false">
                  <p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
                </ion-col>
                <ion-col size="2">
                  <img [ngClass]='direction === "ltr" ? "arrow-icon-offer-en":"arrow-icon-offer-ar"' src="assets/imgs/itemsforsale/arrow.svg">
                </ion-col>
              </ion-row>

            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="!isData">
        <ion-col>
          <div>
            <ion-item lines="none" style="border-radius: 0px !important; --background:#f5f5f5 !important">
              <ion-label>
                <p style="text-align: center;">
                  {{ts.trPK('general','empty')}}
                </p>
              </ion-label>
            </ion-item>
          </div>
        </ion-col>
      </ion-row>
    </div>
  </div>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>