<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 class="ion-padding">
  <h2 class="ion-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 *ngIf="loading">
    <ion-card *ngFor="let _ of [1,2]">
      <ion-item class="no-separator">
        <ion-label>
          <ion-skeleton-text [animated]="true" style="width: 55%; height: 18px; margin-bottom: 8px"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 85%"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 70%"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 50%"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 40%"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 35%"></ion-skeleton-text>
          <ion-skeleton-text [animated]="true" style="width: 65%; height: 16px; margin-top: 6px"></ion-skeleton-text>
        </ion-label>
      </ion-item>
    </ion-card>
  </ng-container>

  <ng-container *ngIf="!loading">
    <ng-container *ngFor="let ccontract of ccontracts; let i = index">
      <ion-card *ngIf="ccontract.status==1">
        <ion-item class="no-separator">
          <ion-avatar slot="start">
            <img *ngIf="ccontract.profile_photo" [src]="ccontract.profile_photo" (error)="ccontract.profile_photo=null">
            <ion-icon *ngIf="!ccontract.profile_photo" name="person-circle" style="width:100%;height:100%;color:var(--ion-color-medium)"></ion-icon>
          </ion-avatar>
          <ion-label>
            <h2 *ngIf="lang===true" class="ion-text-capitalize">{{ ccontract.category }}</h2>
            <h2 *ngIf="lang===false" class="ion-text-capitalize">{{ ccontract.en_category }}</h2>
            <p class="ion-text-wrap">{{ ccontract.address }}</p>
            <p class="ion-text-wrap ion-text-capitalize">{{ ccontracts_dates[i] }}</p>
            <p class="ion-text-wrap ion-text-capitalize">{{'contracts.supplier' | translate}}: {{ ccontract.supplier }}</p>
            <p class="ion-text-wrap">{{'contracts.phone' | translate}}: <a href="tel:{{ ccontract.phone }}">{{ ccontract.phone }}</a></p>
            <p class="ion-text-wrap ion-text-capitalize">{{'contracts.amount' | translate}}: ${{ ccontract.amount }}</p>
            <h2 class="ion-text-wrap">{{'contracts.start_pin' | translate}}<b>{{ ccontract.code }}</b></h2>
            <p class="ion-text-wrap">{{'contracts.info_pin' | translate}}</p>
          </ion-label>
        </ion-item>
        <div *ngIf="ccontract.past_due < 0" style="display: flex; justify-content: flex-end; padding: 0.5em 1em 1.25em;">
          <ion-button style="height: 4.0em" color="danger" (click)="cancelContract(ccontract.id, ccontract.date)">{{'contracts.cancel_1.1' | translate}}<br>{{'contracts.cancel_1.2' | translate}}</ion-button>
        </div>
      </ion-card>
    </ng-container>
  </ng-container>
</ion-content>
