<ion-header>
<ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
  </ion-buttons>
  <ion-title>Postulaciones</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2 class="ion-text-capitalize" style="padding-bottom: 0.5em">Finalizadas</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: 40%"></ion-skeleton-text>
        <ion-skeleton-text [animated]="true" style="width: 70%"></ion-skeleton-text>
        <ion-skeleton-text [animated]="true" style="width: 75%"></ion-skeleton-text>
        <ion-skeleton-text [animated]="true" style="width: 35%"></ion-skeleton-text>
        <ion-skeleton-text [animated]="true" style="width: 80%"></ion-skeleton-text>
      </ion-label>
    </ion-item>
  </ion-card>
</ng-container>

<ng-container *ngIf="!loading">
  <ng-container *ngFor="let postulation of postulations; let i = index">
    <ion-card>
      <ion-item>
        <ion-label>
          <h2 class="ion-text-capitalize">{{ postulation.category }}</h2>
          <p class="ion-text-wrap">{{ postulation.address }}</p>
          <p class="ion-text-wrap ion-text-capitalize">{{ postulations_dates[i] }}</p>
          <p class="ion-text-wrap ion-text-capitalize">Estado: {{ postulation.status }}</p>
        </ion-label>
        <br>
      </ion-item>
    </ion-card>
  </ng-container>
</ng-container>
</ion-content>
