<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Mis Reservas</ion-title>
  </ion-toolbar>
</ion-header>

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

  <ion-list *ngIf="!cargando && reservas.length > 0">
    <ion-list-header>
      <ion-label>Próximas Clases</ion-label>
    </ion-list-header>

    <ion-item-sliding *ngFor="let booking of reservas">
      <ion-item>
        <ion-thumbnail slot="start">
          <img [src]="getClassImage(booking)" onerror="this.src='https://cdn-icons-png.flaticon.com/512/42/42829.png'">
        </ion-thumbnail>
        <ion-label>
          <h2>{{ booking.className }}</h2>
          <p>{{ obtenerFechaClase(booking) | date:'EEE, d MMM, h:mm a' }}</p>
          <ion-badge [color]="getStatusColor(booking.status)">
            {{ getStatusText(booking.status) }}
          </ion-badge>
        </ion-label>
      </ion-item>
      
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="confirmarCancelacion(booking)" 
                        *ngIf="booking.status === 'confirmed'">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
          Cancelar
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
  
  <ion-refresher slot="fixed" (ionRefresh)="refrescarReservas($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  
  <div *ngIf="!cargando && reservas.length === 0" class="ion-text-center ion-padding empty-state">
    <ion-icon name="calendar-outline" class="large-icon"></ion-icon>
    <h3>No tienes reservas activas</h3>
    <p>Explora las clases disponibles y haz tu primera reserva</p>
    <ion-button expand="block" routerLink="/tabs/classes">
      <ion-icon name="fitness" slot="start"></ion-icon>
      Ver Clases Disponibles
    </ion-button>
  </div>
</ion-content>
