<div class="slide-head" [ngStyle]="{'height': heightQuestionCenterContent}">
    <div class="s-left" [ngStyle]="{'height': heightQuestionCenterContent}">
      <div class='toc-container' id='toc-container'>
        <div class='row'>
          <div class='toctitle'>
          Table of contents:
        </div>
        </div>
        <div *ngFor="let c of toc; let i = index" class='firstlevel row'
        [ngClass]="{'active': currentQuestionId==c.flqid}">
            <div *ngIf="c.name" class='toc-element level-1 col-sm-11 col-sm-offset-1'
            [ngClass]="{'selected': currentQuestionId==c.qid}">
              <a href='javascript:void(0)' (click)="gotoSection(c)">{{c.name}}</a>
            </div>
            <div *ngFor="let cc of c.childs; let ii = index" class='secondlevel row'>
                <div *ngIf="cc.name" class='toc-element level-2 col-sm-10 col-sm-offset-2'
                [ngClass]="{'selected': currentQuestionId==cc.qid}">
                    <a href='javascript:void(0)' (click)="gotoSection(cc)">{{cc.name}}
                      </a>
                    </div>
                <div *ngFor="let ccc of cc.childs; let iii = index" class='thirdlevel row'>
                    <div *ngIf="ccc && ccc.name" class='toc-element level-3 col-sm-9 col-sm-offset-3'
                    [ngClass]="{'selected': currentQuestionId==ccc.qid}">
                        <a href='javascript:void(0)' (click)="gotoSection(ccc)">{{ccc.name}}</a>
                      </div>
                </div>
            </div>
        </div>
      </div>
        <!--<ul id='toc-container'>
          <li class="item-component" >
              Input field
          </li>
          <li class="item-component" >
              Input field
          </li>
          <li class="item-component" >
              Input field
              <ul>
                  <li class="item-component" >
                      Input field
                  </li>
              </ul>
          </li>
        </ul>-->
        <button *ngIf="test !== undefined && test !== null && test.options !== undefined && test.options !== null && test.options.changeable === 'true' && !(currentQuestionIndex<0 && currentSlideIndex<=0)" class="btn btn-success"
        >Back</button>
      </div>
  <div class="s-center" [ngStyle]="{'height': heightQuestionCenter, 'width':widthQuestionCenter}">
    <div class="s-title">
      <!--{{test.TestName}} - -->{{currentQuestion.name}} <!--- {{currentSlide.type}} {{currentSlideName}} -->
    </div>
    
    <div class="s-content" id="s-content" [ngStyle]="{'height': heightQuestionCenterContent, 'background-color' : backgroundColor}">
      <div [ngStyle]="{'height': heightQuestionCenterContent}">
          <div *ngIf='currentSlideName!=""' class='s-title s-name'>{{currentSlideName}}</div>
        <div *ngFor="let c of components[currentSlideId]; let i = index">
          <div class="c-item" 
            [ngSwitch]="c.componentType" 
            [ngStyle]="{'top': c.posY + 'px', 'left': c.posX + 'px', 'position' : 'absolute'}"
           >

           <!-- ----------------- -->

           <div id="{{c.id}}" *ngSwitchCase="'CHECKABLETABLE'">
            
                            <div *ngIf="c.tableComponent" style="background-color:white">
                              <table class="table table-bordered" style="box-shadow: 10px 10px 5px #dedede;">
                                <thead>
                                  <tr>
                                    <th></th>
                                    <th *ngFor="let col of c.tableComponent[1];">{{col.label}}</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr *ngFor="let row of c.tableComponent[0]; let i = index">
                                    <td>{{row.label}}</td>
                                    <td *ngFor="let col of c.tableComponent[1]; let j = index">
                                      <!-- <mat-checkbox [checked]="isInCheckedString(c,i,j)" (change)=updateCheckedString(c,i,j)></mat-checkbox> -->
                                      <md-checkbox [checked]="isInCheckedString(c,i,j)" (change)="checkableTableChange(c,i,j); checkTransition(c, $event)"></md-checkbox>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
            
                          </div>
           <!-- ----------------- -->

           <div *ngSwitchCase="'UPLOADS'" class="e-uploadsarea">
            
              <!-- <div id="{{c.id}}" (click)="checkTransition(c, $event)" [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}"> -->

              <div id="{{c.id}}" (click)="checkTransition(c, $event)" [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}"
                style="background-color:rgb(191, 255, 234);" (click)="openDialogUploads(c)">

                <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="onFileOver(c)" 
                  class="well my-drop-zone" fxLayoutAlign="center center" style="min-height:100%; font-size:20px;">
                  Drop zone
              </div>
              </div>
          </div>

            <label *ngIf="c.label && c.componentType!='CHECKBOX'">{{c.label}}</label>
            <input id="{{c.id}}" *ngSwitchCase="'TEXT'" [attr.maxlength]="c.chars" 
            [ngStyle]="{'height':c.dimHeight+'px', 'width': c.dimWidth +'px'}" 
            type="text" name="{{c.name}}" (keypress)="checkTransition(c, $event)">

            <textarea id="{{c.id}}" *ngSwitchCase="'TEXTAREA'" 
            [attr.cols]="c.cols" [attr.rows]="c.rows" 
            [ngStyle]="{'height':c.dimHeight+'px', 'width': c.dimWidth +'px'}" 
            type="text" name="{{c.name}}" (keypress)="checkTransition(c, $event)"></textarea>

            <div id="{{c.id}}" *ngSwitchCase="'RADIO'">
                <div *ngFor="let r of c.radioComponent; let y = index" >
                  <input class="class-radio" id="{{c.id}}_{{y}}" value="{{c.value}}"
                  style="width: 30px;" type="radio" name="{{c.groupName}}"
                  (click)="radioChange(c, r);checkTransition(c, $event)" > 
                  <label for="{{c.id}}_{{y}}">{{r.label}}</label><br>
                </div>
              </div>
              <div *ngSwitchCase="'CHECKBOX'" >
                <input id="{{c.id}}" style="height: 15px !important; width: 15px !important;" type="checkbox" value="{{c.value}}"
                  name="{{c.groupName}}" (click)="checkboxChange(c); checkTransition(c, $event)" >
                <label for="{{c.id}}"  style='white-space:nowrap; margin-bottom: 0;
                top: -5px;
                position: relative;'>{{c.label}}</label>
              </div>
              <input *ngSwitchCase="'RANGE'" id="{{c.id}}" max='{{c.max}}' min ='{{c.min}}' step='{{c.step}}'
              style="height: 50px;" name="{{c.name}}"  type="range" />
              <div *ngSwitchCase="'IMAGE'" class="e-image" [ngClass]="{'selected': c.options.isChecked}" (click)="imageChange(c);checkTransition(c, $event)">
                  <img [urlApi]="c.url" [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}" id="{{c.id}}" />
                </div>
            <div *ngSwitchCase="'VIDEO'" class="e-image">
                  <vg-player (onPlayerReady)="onPlayerReady($event, c.id)">
                      <video [vgMedia]="media" #media id="{{c.id}}" preload="auto" controls
                      [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}">
                          <source src="{{c.url}}" type="video/mp4">
                      </video>
                  </vg-player>
              </div>
            <div *ngSwitchCase="'CLICK_AREA'" class="e-clickarea">
                <div id="{{c.id}}"  (click)="checkTransition(c, $event)" 
                [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}"></div>
              </div>
            <div *ngSwitchCase="'TEXTBLOCK'" >
                <div [froalaView]="c.text" id="{{c.id}}" [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px', 'color' : c.options.color, 'font-size' : c.options.fsize+'px'}"></div>
              </div>
            <button *ngSwitchCase="'BUTTON'" class="btn btn-{{c.options.bstyle}}" (click)="checkboxChange(c); checkTransition(c, $event)"
              [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px'}">{{c.text}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="s-right s-relative" [ngStyle]="{'height': heightQuestionCenterContent}">
      <div *ngIf="topic" class='voc-container'>
          <div class='voc-title'>Vocabulary <i class="fa fa-2x fa-times pull-right" (click)="hideTopic()"></i></div>
          <div class='voc-subcontainer'>
            <div class="voc-lemma">{{topic.word}}</div>
            <div class="voc-definition">{{topic.definition}}</div>
        </div>
      </div>
      <div class="progress-wrapper">
        <div class="title-progress">
        Progress
      </div>
    <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="getPercentuale()"
          aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': getPercentuale()+'%'}" style="width:0%">
            {{getPercentuale()}}%
          </div>
        </div>
        <div class="text-center">
            <button type='button' (click)="backQuestion()" class='escibutton btn btn-warning btn-sm'>EXIT</button>
          </div>
       </div> 
  </div>
</div>

