<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/classes"></ion-back-button>
    </ion-buttons>
    <ion-title>Detalle de Clase</ion-title>
  </ion-toolbar>
</ion-header>

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

  <div *ngIf="gymClass && !cargando">
    <ion-card>
      <ion-img [src]="gymClass.imageUrl || 'https://cdn-icons-png.flaticon.com/512/140/140627.png'" class="class-image"></ion-img>
      
      <ion-card-header>
        <ion-badge>{{ gymClass.category }}</ion-badge>
        <ion-card-title class="ion-margin-top">{{ gymClass.name }}</ion-card-title>
        <ion-card-subtitle>Instructor: {{ gymClass.instructor }}</ion-card-subtitle>
      </ion-card-header>
      
      <ion-card-content>
        <p>{{ gymClass.description }}</p>
        
        <ion-list lines="none">
          <ion-item>
            <ion-icon name="time-outline" slot="start" color="primary"></ion-icon>
            <ion-label>
              <h3>Horario</h3>
              <p>{{ gymClass.startTime | date:'EEEE, d MMM, h:mm a' }} - {{ gymClass.endTime | date:'h:mm a' }}</p>
            </ion-label>
          </ion-item>
          
          <ion-item>
            <ion-icon name="people-outline" slot="start" color="primary"></ion-icon>
            <ion-label>
              <h3>Capacidad</h3>
              <p>{{ gymClass.currentBookings }}/{{ gymClass.maxCapacity }} plazas ocupadas</p>
              <ion-progress-bar [value]="gymClass.currentBookings / gymClass.maxCapacity" 
                                [color]="getCapacityColor()"></ion-progress-bar>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
    
    <div class="ion-padding">
      <ion-button expand="block" (click)="reservarClase()" [disabled]="isClassFull() || reservando">
        <ion-spinner name="dots" *ngIf="reservando"></ion-spinner>
        <span *ngIf="!reservando">Reservar Plaza</span>
      </ion-button>
      
      <ion-text color="medium" *ngIf="isClassFull()" class="ion-text-center">
        <p>Lo sentimos, esta clase está completa.</p>
      </ion-text>
    </div>
  </div>
  
  <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="gymClass">
    <ion-fab-button color="light">
      <ion-icon name="share-social"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="primary" (click)="compartir('whatsapp')">
        <ion-icon name="logo-whatsapp"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="secondary" (click)="compartir('twitter')">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="tertiary" (click)="compartir('email')">
        <ion-icon name="mail"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
