<ion-content>
  <div class="head-title">
    <ion-toolbar  class="header-toolbar">
      <ion-buttons slot="start">
        <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
      </ion-buttons>
      <ion-title color="light" >{{ts.trPK('itemforsale','offersdiscount')}}</ion-title>
    </ion-toolbar>
  </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-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">
          <img 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.name }">
            <div class="top">
             <!-- <ion-icon name="images"></ion-icon> -->
             <img [src]="key.icon" />
            </div>
            <div class="bottom-icon">
              <p>{{key.name}}</p>
            </div>
           </div>
        </div>
       
      </div>

     

  <ion-row>
    <ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
      <ion-card>
        <ion-card-header>
          <img [src]="item.Banner_Image" />
        
          <ion-card-title>{{item.Title}}</ion-card-title>
        </ion-card-header>
      
        <ion-card-content>
       <div [innerHTML]="getDotted(item.Description)"></div>
          <strong class="dark">
            {{item.Discount}}  {{ts.trPK('general','discount')}}
          </strong>
          <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"  *ngIf="checkDate(item['End Date']) ==false">
              <ion-icon name="arrow-round-forward"></ion-icon>
            </ion-col>
          </ion-row>
           
        </ion-card-content>
       </ion-card>
    </ion-col>
   
  </ion-row>
  </div>
  

    </ion-content>
    