<ion-header>
  <div class="colorline"><img src="assets/images/borde-top.jpg" /></div>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu" color="secondary"></ion-icon>
    </button>
    <ion-title><img src="assets/images/header-logo.jpg" /></ion-title>
  </ion-navbar>
</ion-header>  
<ion-content class="enrolar" padding>
  
  <ion-row class="tabs" *ngIf="loaded">
    <ion-col [class.on]="primaryTab" [class.off]="secondTab" (click)="togglePendientes()">Pendientes</ion-col>
    <ion-col [class.on]="secondTab" [class.off]="primaryTab" (click)="toggleHistorial()">Historial</ion-col>
  </ion-row>
  
  <div class="card_curso_offline" *ngIf="modoSinConexion">
    Modo sin conexión
  </div>

  <div *ngIf="primaryTab && loaded">

    <div class="card_curso_null" *ngIf="totalPendientes == 0">
      No hay cursos por enrolar
    </div>

	<div *ngFor="let pend of pendientes; let i = index">
	    <div class="card_curso" *ngIf="pend.pasado == 0">

	    <ion-grid>
	      <ion-row (click)="openEnrolar(pend);">
	        <ion-col width-25> 
	          <img src="{{pend.icono_curso}}" />
	        </ion-col>
	        <ion-col width-75>
	            <h3>{{pend.nombre}}</h3>
	            <h3>Curso: {{pend.nombre_curso}}</h3>
	            <h4 *ngIf="pend.fecha_inicio != null">Fecha: {{ formatDate(pend.fecha_inicio) | date: 'dd/MM/yyyy'}}</h4>
	        </ion-col>
	      </ion-row>

	      <ion-row class="cardbox enrolamiento">
	        <ion-col width-100>
	          <button class="yellow" *ngIf="pend.disponible == 1" (click)="enrolate(pend);">Enrolar</button>
	          <div *ngIf="pend.disponible == 0 && pend.pasado == 0">Se habilitará para enrolamiento {{formatDate(pend.fecha_inicio) | date: 'dd/MM/yyyy'}} {{ pend.hh_ini }}</div>
	        </ion-col>
	      </ion-row>

	    </ion-grid>

	    </div>
    </div>

  </div>
  <div *ngIf="secondTab && loaded">

    <div class="card_curso_null" *ngIf="totalHistoricos == 0">
      No hay cursos en el historial
    </div>
	
	<div *ngFor="let pend of pendientes; let i = index">
	    <div class="card_curso" *ngIf="pend.pasado == 1">

	      <ion-grid>
	        <ion-row (click)="openEnrolar(pend);">
	          <ion-col width-25> 
	            <img src="{{pend.icono_curso}}" />
	          </ion-col>
	          <ion-col width-75>
	              <h3>{{pend.nombre}}</h3>
	              <h3>Curso: {{pend.nombre_curso}}</h3>
	              <h4 *ngIf="pend.fecha_inicio != null">Fecha: {{formatDate(pend.fecha_inicio) | date: 'dd/MM/yyyy'}}</h4>
	          </ion-col>
	        </ion-row>

	        <ion-row class="cardbox enrolamiento">
	          <ion-col width-100>
	            <div>Curso sin módulos próximos</div>
	          </ion-col>
	        </ion-row>

	      </ion-grid>

	    </div>
    </div>


  </div>


</ion-content>