<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>  

<ion-content class="cursosdetalle" padding>

  <div class="card_curso">
    <ion-grid>
      <ion-row>
        <ion-col width-25> 
          <img src="{{curso.icono_curso == '' || curso.icono_curso == null ? 'assets/images/training.png' : curso.icono_curso}}" />
        </ion-col>
        <ion-col width-75>
            <h3>Curso: {{curso.nombre}}</h3>
            <h4>Lugar: {{curso.lugar == null ? 'No definido' : curso.lugar}}</h4>
            <h4>Fecha: {{curso.fecha_inicio == null ? 'No definido' : formatDate(curso.fecha_inicio) | date: 'dd/MM/yyyy'}}</h4>
          <br />
        </ion-col>
      </ion-row>
      
      <ion-row>
        <ion-col width-100>
          <h4>Descripción</h4>
          <p><span [innerHTML]="sanitizer.bypassSecurityTrustHtml(curso.descripcion == '' ? 'No definido' : curso.descripcion)"></span></p>
          <h4>Relatores</h4>
          <div class="" *ngIf="curso.relatores.length == 0">No definido</div>
          <div class="" *ngFor="let rela of curso.relatores; let j = index">
              <ion-row>
                  <ion-col width-25 class="detalle_avatar">
                    <img src="{{rela.avatar}}" />
                  </ion-col>
                  <ion-col width-75 class="detalle_avatar_nombre">
                    {{rela.nombre}}
                  </ion-col>
              </ion-row>
          </div>
          <h4>Enroladores</h4>
          <div class="" *ngIf="curso.enroladores.length == 0">No definido</div>
          <div class="" *ngFor="let enrol of curso.enroladores; let j = index">
              <ion-row>
                  <ion-col width-25 class="detalle_avatar">
                    <img src="{{enrol.avatar}}" />
                  </ion-col>
                  <ion-col width-75 class="detalle_avatar_nombre">
                    {{enrol.nombre}}
                  </ion-col>
              </ion-row>
          </div>
        </ion-col>
      </ion-row>

      </ion-grid>
  </div>
    
  <div class="separator_big"></div>

  <div class="infobox" *ngFor="let modulo of curso.modulos; let j = index">
      <ion-row>
          <ion-col class="modulo_icon" width-20>
            <img src="assets/icon/clock.png" />
          </ion-col>
          <ion-col class="modulo_nombre" width-50>
            {{modulo.modulo}}
          </ion-col>
          <ion-col class="modulo_hora" width-30>
            <strong>{{formatDate(modulo.fecha_inicio) | date:'HH:mm' }} hrs.</strong>
          </ion-col>
      </ion-row>
      <ion-row>
          <ion-col class="modulo_fecha" width-100 text-right>
              {{formatDate(modulo.fecha_inicio) | date:'dd' }} de <span [innerHTML]="mes(modulo.fecha_inicio)"></span> del {{formatDate(modulo.fecha_inicio) | date:'yyyy' }}
          </ion-col>
      </ion-row>
  </div>


</ion-content>