<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{'contracts.viewsuppliers_header' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <h3 *ngIf="lang===true" class="ion-text-capitalize">{{ pcontractssuppliers_category[0] }}</h3>
  <h3 *ngIf="lang===false" class="ion-text-capitalize">{{ pcontractssuppliers_en_category[0] }}</h3>
  <p class="ion-text-capitalize">{{ pcontractssuppliers_address[0] }}</p>
  <p class="ion-text-capitalize" style="margin-top: -0.6em">{{ pcontractssuppliers_dates[0] }}</p>
  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let pcontractsupplier of pcontractssuppliers; let i = index">
    <ion-card-header style="padding:0;height:8em" *ngIf="pcontractsupplier.supplier != null">
      <img style="display:block;width:100%;height:100%" src="{{ pcontractsupplier.cover_photo }}" *ngIf="pcontractsupplier.supplier != null"/>
    </ion-card-header>
    <ion-item *ngIf="pcontractsupplier.supplier != null">
      <ion-avatar slot="start">
        <img *ngIf="pcontractsupplier.profile_photo" [src]="pcontractsupplier.profile_photo" (error)="pcontractsupplier.profile_photo=null">
        <ion-icon *ngIf="!pcontractsupplier.profile_photo" name="person-circle" style="width:100%;height:100%;color:var(--ion-color-medium)"></ion-icon>
      </ion-avatar>
      <ion-label>
        <h2 class="ion-text-wrap ion-text-capitalize" *ngIf="pcontractsupplier.supplier != null">{{ pcontractsupplier.supplier }}</h2>
        <p class="ion-text-wrap" *ngIf="pcontractsupplier.supplier != null"><ion-icon name="checkmark-circle" color="secondary" *ngIf="pcontractsupplier.membership != false"></ion-icon> {{ pcontractssuppliers_certified[i] }}</p>
        <p class="ion-text-wrap" *ngIf="pcontractsupplier.supplier != null">{{'contracts.viewsuppliers_tags' | translate}}: {{ pcontractsupplier.tags }}</p>
        <p class="ion-text-wrap" *ngIf="pcontractsupplier.supplier != null">{{'contracts.viewsuppliers_fee' | translate}}: ${{ pcontractsupplier.fee }}</p>
        <p class="ion-text-wrap" *ngIf="pcontractsupplier.supplier != null">{{'contracts.viewsuppliers_rate' | translate}}: {{ pcontractsupplier.score }} de 5 <ion-icon name="star"></ion-icon></p>
      </ion-label>
      <ion-button style="height: 3em; padding-left: 0.5em;" color="secondary" (click)="hiresupplier(pcontractsupplier.supplier_id, pcontractsupplier.id, pcontractsupplier.supplier, pcontractsupplier.fee)">{{'contracts.viewsuppliers_hire' | translate}}</ion-button>
    </ion-item>
  </ion-card>
</ion-content>
