<ion-header>
  <div class="colorline"><img src="assets/images/borde-top.jpg" /></div>
  <ion-navbar>
    <ion-title><img src="assets/images/header-logo.jpg" /></ion-title>
  </ion-navbar>
</ion-header>  
<div class="full-overlay" padding [hidden]="overlayHidden" scroll="false">
  <div class="vertical-center popup notifyRequest rechazoCurso" color="primary" [hidden]="notifyRequest">
    <h3>{{ enCurso.nombre }}</h3>
    <br />
      <div align="left" class="text-left">&nbsp;&nbsp;Rut</div>
      <ion-input type="text" color="secondary" maxlength="15" [(ngModel)]="man.rut" ></ion-input>
      <div align="left" class="text-left">&nbsp;&nbsp;Motivo</div>
      <ion-item>
      <ion-textarea name="motivo" color="secondary" placeholder="Ingrese detalle del motivo" [(ngModel)]="man.motivo"></ion-textarea>
      </ion-item>
    <br />
    <button class="shadow opa5" ion-button (click)="closeNotify();">Cancelar</button>
    <button class="shadow" ion-button (click)="enrolarManualOK();">Enrolar</button>
  </div>
</div>

<ion-content class="sub" padding>
  
  <div> <!--  *ngIf="primaryTab" -->
    <div class="card_curso">
    <ion-grid>
      <ion-row>
        <ion-col width-25> 
          <img src="{{element.icono_curso}}" />
        </ion-col>
        <ion-col width-75>
            <h3>{{element.nombre}}</h3>
            <h3>Curso: {{element.nombre_curso}}</h3>
            <h4 *ngIf="element.fecha_inicio != null">Fecha: {{ formatDate(element.fecha_inicio) | date: 'dd/MM/yyyy'}}</h4>
          <br />
        </ion-col>
      </ion-row>

      <ion-row class="">
        <ion-col width-33>
        </ion-col>
        <ion-col width-66 text-right>
          <button class="yellow" *ngIf="element.disponible == 1" (click)="enrolateManual();">Enrolar alumno</button>
        </ion-col>
      </ion-row>

    </ion-grid>
    </div>
      
    <div>
      <ion-grid>
      <ion-row>
        <ion-col class="sync" text-left text-wrap>
            <ion-item text-wrap><strong>Última sincronización:</strong></ion-item>
        </ion-col>
        <ion-col class="sync" text-right text-wrap>
            <ion-item text-wrap><div>{{ synctxt }}</div></ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col width-100  text-center>
          <button type="button" (click)="manual()" class="yellow">Sincronización manual</button>
        </ion-col>
      </ion-row>
      </ion-grid>
    </div>
    <div class="moduloSelector" text-center>
      
      <div text-center *ngIf="modulo.id != 0">
        <div class="time"><img src="assets/icon/solicitar.blue.png" /></div>
        <div class="time">{{ formatDate(modulo.fecha_inicio) | date:'dd/MM/yy'}}</div>
        <div class="time"><img src="assets/icon/clock.png" /></div>
        <div class="time">{{ formatDate(modulo.fecha_inicio) | date:'HH:mm'}}</div>
      </div>

      <h4>Seleccione módulo</h4>

      <select [(ngModel)]="modulo.id" (ngModelChange)="changeModulo($event)">
        <option value="0">Seleccione modulo</option>
        <option value="{{mod.id}}|{{mod.tipo}}|{{mod.fecha}}" *ngFor="let mod of modulos; let i = index">{{ mod.nombre }}</option>
      </select>

    </div>
  
    <!--
    <div class="card_curso_offline" *ngIf="modoSinConexion == true" text-center>
      Modo sin conexión: no puedes ver el detalle de alumnos en este modo
    </div>
    -->

    <div class="infobox" *ngIf="activo != 0">

        <div class="" *ngFor="let alumno of alumnos; let j = index">
            <ion-row>
                <ion-col width-25 class="detalle_avatar">
                  <img src="{{alumno.avatar}}" />
                </ion-col>
                <ion-col width-75 class="detalle_avatar_nombre">
                  <div><ion-item text-wrap>{{alumno.nombre ? alumno.nombre : alumno.rut}}</ion-item></div>
                  <div class="detalle_avatar_estado">
                    <span *ngIf="alumno.estado == 0" style="color: red;">pendiente</span>
                    <span *ngIf="alumno.estado == 1" style="color: green;">enrolado</span>
                  </div>
                </ion-col>
            </ion-row>
        </div>
    </div>

  </div>


</ion-content>