<div class="slide-head" [ngStyle]="{'min-height': hieghtQuestion}">
    <div class="s-left" [ngStyle]="{'min-height': hieghtQuestion}">
        <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]="{'min-height': heightQuestionCenter}">
    <div class="s-title">
      {{test.TestName}} - {{currentQuestion.name}} - {{currentSlide.type}} {{currentSlideName}}
    </div>
    <div class="s-content" id="s-content" [ngStyle]="{'min-height': heightQuestionCenterContent, 'background-color' : backgroundColor}">
      <div [ngStyle]="{'min-height': heightQuestionCenterContent}">
        <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', 'width': c.dimWidth +'px', 'height': c.dimHeight + 'px', 'position' : 'absolute'}"
           >
            <!--<i class="material-icons" (click)="configComponentModal(c)">&#xE8B8;</i>
            <i class="material-icons" (click)="removeComponent(i)">&#xE5CD;</i>-->
            <!--<br/>-->
            <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}}">{{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 id="{{c.id}}" [ngStyle]="{'width': c.dimWidth +'px', 'height': c.dimHeight + 'px', 'color' : c.options.color, 'font-size' : c.options.fsize+'px'}">{{c.text}}</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>
<div class="slide-foo">
  <div class="f-left">
    <div class="new-question" style="cursor: pointer;" (click)="backQuestion()">
      <img src="assets/img/new-question-icon.PNG" alt="question" width="40px" height="10px"> TEST
    </div>
  </div>
  <div class="f-center">
    <div *ngFor="let s of currentQuestion.slides; let i = index">
    <!--<div *ngFor="let s of currentQuestion.slides; let i = index" (click)="changeSlide(i)">-->
      <div class="question-info"  [ngClass]="{'selected': s.slideId == currentSlideId}">
        <!--<i class="material-icons">&#xE22B;</i>
        <i class="material-icons" (click)="configSlideModal(s)">&#xE8B8;</i> -->       
        <br/> {{s.type}}
      </div>
      <div class="sperator-right">
        <i class="material-icons">&#xE037;</i>
      </div>
    </div>

  </div>
  <div class="f-right">
    <!--<div class="new-question" (click)="saveQuestion()">
      <i class="material-icons">&#xE161;</i> <br/> Save
    </div>-->
  </div>
</div>
