<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>
    <ion-card>
      <ion-card-header>
        <div class="header-img-main"  [ngStyle]="{'background-image': 'url(' + details.Banner_Image + ')'}" ></div>
        
        
      
        <ion-card-title *ngIf="direction =='ltr'">{{details.Title}}</ion-card-title>
        <ion-card-title *ngIf="direction =='rtl'">{{details.Title_AR}}</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
    <div *ngIf="direction =='ltr'" [innerHTML]="details.Description"> </div>
    <div *ngIf="direction =='rtl'" [innerHTML]="details.Description_AR"> </div>
        <div class="content-bottom">
          <ion-row [class]="checkDate(details['End Date']) ==true ? 'green' : 'red'">
            <ion-col size="10" *ngIf="checkDate(details['End Date']) ==true">
             <p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p> 
            </ion-col>
            <ion-col size="10"  *ngIf="checkDate(details['End Date']) ==false">
             <p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
            </ion-col>
           
          </ion-row>


      <ion-row>
        <ion-col size="10">
          <h1> {{details.Discount}} </h1>
        </ion-col>
        <ion-col size="2">
 <div class="right-align">
  <ion-icon name="share" class="share-icon" (click)="share()"></ion-icon>
          </div>
        </ion-col>
      </ion-row>  
      </div>
     
    
      </ion-card-content>

  
    </ion-card>
  </div>
  <p class="related-offers">
    <strong>
      {{ts.trPK('itemforsale','related-offers')}}
    </strong>
  </p>
  <ion-row *ngIf="related" class="related-offers-container">
    <ion-col size="6"  *ngFor="let item of related" (click)="openRelated(item)">
      <ion-card class="related-card">
        <ion-card-header>
          <div class="header-img"  [ngStyle]="{'background-image': 'url(' + item.Banner_Image + ')'}" ></div>
        
        
          <ion-card-title>{{item.Title}}</ion-card-title>
        </ion-card-header>
      
        <ion-card-content>
       <div [innerHTML]="getDotted(item.Description)" class='description'></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 src="assets/imgs/itemsforsale/arrow.svg">
            </ion-col>
          </ion-row>
           
        </ion-card-content>
       </ion-card>
    </ion-col>
   
  </ion-row>
  </ion-content>