<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Clases Disponibles</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar placeholder="Buscar clases" (ionInput)="buscarClases($event)" [debounce]="500"></ion-searchbar>

  <ion-segment (ionChange)="filtrarPorCategoria($event)" value="todas">
    <ion-segment-button value="todas">
      <ion-label>Todas</ion-label>
    </ion-segment-button>
    <ion-segment-button value="Mente y Cuerpo">
      <ion-label>Mente/Cuerpo</ion-label>
    </ion-segment-button>
    <ion-segment-button value="Cardiovascular">
      <ion-label>Cardio</ion-label>
    </ion-segment-button>
    <ion-segment-button value="Fuerza">
      <ion-label>Fuerza</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="cargando" class="ion-text-center ion-padding">
    <ion-spinner></ion-spinner>
    <p>Cargando clases...</p>
  </div>

  <ion-list *ngIf="!cargando">
    <ion-item *ngFor="let gymClass of clasesFiltradas" [routerLink]="['/app/classes', gymClass.id]" detail>
      <ion-thumbnail slot="start">
        <ion-img [src]="gymClass.imageUrl || 'https://cdn-icons-png.flaticon.com/512/140/140627.png'"></ion-img>
      </ion-thumbnail>
      <ion-label>
        <h2>{{ gymClass.name }}</h2>
        <p>{{ gymClass.startTime | date:'EEE, d MMM, h:mm a' }}</p>
        <p>{{ gymClass.instructor }}</p>
        <ion-note>
          <ion-icon name="people-outline"></ion-icon>
          {{ gymClass.currentBookings }}/{{ gymClass.maxCapacity }}
        </ion-note>
      </ion-label>
      <ion-badge slot="end" *ngIf="gymClass.category">{{ gymClass.category }}</ion-badge>
    </ion-item>
  </ion-list>

  <ion-refresher slot="fixed" (ionRefresh)="refrescarClases($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <div *ngIf="!cargando && clasesFiltradas.length === 0" class="ion-text-center ion-padding">
    <ion-icon name="sad-outline" style="font-size: 48px;"></ion-icon>
    <h3>No se encontraron clases</h3>
    <p>Intenta con otros filtros o términos de búsqueda.</p>
  </div>
</ion-content>