<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_4' | 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 style="--border-color: #fff">
        <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 report of reports; let i = index">
      <ion-card>
        <ion-item style="--border-color: #fff">
          <ion-label>
            <h2 class="ion-text-capitalize" *ngIf="lang">{{ report.category }}</h2>
            <h2 class="ion-text-capitalize" *ngIf="!lang">{{ report.en_category }}</h2>
            <p class="ion-text-wrap ion-text-capitalize">{{'contracts.supplier' | translate}}: {{ report.supplier }}</p>
            <p class="ion-text-wrap ion-text-capitalize" *ngIf="report.company">{{'reports.company' | translate}}: {{ report.company }}</p>
            <p class="ion-text-wrap">{{ report.address }}</p>
            <p class="ion-text-wrap ion-text-capitalize">{{ reports_dates[i] }}</p>
            <p>{{'contracts.amount' | translate}}: ${{ report.amount }}</p>
          </ion-label>
          <ion-button color="secondary" fill="outline" slot="end" size="large" (click)="viewDiscussion(report.id)">
            <ion-icon slot="icon-only"  name="chatbubbles-outline"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-card>
    </ng-container>
  </ng-container>
</ion-content>
