<ion-header>
<ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
  </ion-buttons>
  <ion-title>{{'contracts.header' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
  <h2 text-capitalize style="padding-bottom: 0.5em">{{'contracts.header_2' | translate}}</h2>
  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
    <ng-container *ngFor="let ccontract of ccontracts; let i = index">
      <ion-card *ngIf="ccontract.status==1">
        <ion-item style="--border-color: #fff">
          <ion-label>
            <h2 *ngIf="lang===true"text-capitalize>{{ ccontract.category }}</h2>
            <h2 *ngIf="lang===false"text-capitalize>{{ ccontract.en_category }}</h2>
            <p text-wrap>{{ ccontract.address }}</p>
            <p text-wrap text-capitalize>{{ ccontracts_dates[i] }}</p>
            <p text-wrap text-capitalize>{{'contracts.supplier' | translate}}: {{ ccontract.supplier }}</p>
            <p text-wrap>{{'contracts.phone' | translate}}: <a href="tel:{{ ccontract.phone }}">{{ ccontract.phone }}</a></p>
            <p text-wrap text-capitalize>{{'contracts.amount' | translate}}: ${{ ccontract.amount }}</p>
            <h2 text-wrap>{{'contracts.start_pin' | translate}}<b>{{ ccontract.code }}</b></h2>
            <p text-wrap>{{'contracts.info_pin' | translate}}</p>
          </ion-label>
          </ion-item>
          <ion-button *ngIf="ccontract.past_due < 0" style="height: 4.0em; padding-right: 1.0em; padding-bottom:1.0em; float: right" color="danger" (click)="cancelContract(ccontract.id, ccontract.date)">{{'contracts.cancel_1.1' | translate}}<br>{{'contracts.cancel_1.2' | translate}}</ion-button>
      </ion-card>
    </ng-container>
</ion-content>
