<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_1' | translate}}</h2>
<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
  <ion-refresher-content></ion-refresher-content>
</ion-refresher>
  <ion-card *ngFor="let pcontract of pcontracts; let i = index">
    <ion-item>
      <ion-label>
        <h2 *ngIf="lang===true" text-capitalize>{{ pcontract.category }}</h2>
        <h2 *ngIf="lang===false" text-capitalize>{{ pcontract.en_category }}</h2>
        <p text-wrap>{{pcontract.address}}</p>
        <p text-wrap text-capitalize>{{pcontracts_dates[i]}}</p>
      </ion-label>
      <ion-button style="height: 3em; padding-left: 0.5em;" color="secondary" (click)="viewsuppliers(pcontract.id)">{{'contracts.viewsuppliers_1.1' | translate}}<br>{{'contracts.viewsuppliers_1.2' | translate}}</ion-button>
    </ion-item>
  </ion-card>
</ion-content>
