You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/src/app/offersdiscount/offer-details/offer-details.component.html

93 lines
3.0 KiB
HTML

<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">
<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>