<div class="body-bg"></div>

<div class="player-border">
  <div class="player-preview-sequence">
    <div class="content-wrap ">
  <!--    aspectRatioSizer-->
  <!--    <svg viewBox="0 0 4 3" style="max-width: 100vmin;max-height: 100vmin;"/>-->
      <!--[style.padding]="randPics.length > 2 && randPics.length <= 4 ? '12% 20% 0' : '15% 5% 0'"-->
      <div class="item-wrap"    #boxContainer>
        <div *ngFor="let pic of randPics index as i"
             class="gutter-row item"
             [attr.data-idx]="pic.idx"
             >
          <div class="item-box">
            <img src="assets/sequence2/seq_item_bg.png" style="width: 100%;height: 100%" alt="">
  
            <div class="item-pic drop-target"
                 [attr.data-idx]="pic.idx"
                 [id]="'tgt'+i"
                 (click)="checkSelectedIndex($event, pic.idx)"
                 [style.background-image]="pic.res_id | backgroundImage ">
  
            </div>
            <div class="item-label {{'p-font-size-'+randPics.length}}" *ngIf="pic.isRight">{{pic.idx + 1}}</div>
  
          </div>
        </div>
      </div>
  
      <div class="seq-wrap" >
        <img class="seq-wrap-bg" src="assets/sequence2/rectangle.png" style="width: 100%;height: 100%" alt="">
        <div class="seq-num-box" #indexNumBox>
          <img
            *ngFor="let i of _itemsArr"
            src="assets/sequence2/{{i}}.png" alt="">
        </div>
        <div class="answer-wrap" >
          <img class="btn-answer"
               (click)="showRightAnswer()"
               src="assets/sequence2/answer.png" alt="">
        </div>
      </div>
  
    </div>
  
    <!--<div class="bubble-box" #bubbleContainer>-->
    <!--<div *ngFor="let pic of randPics index as i"-->
    <!--[id]="'bb'+i"-->
    <!--[class]="'bubble b'+i+(randPics.length<5 ? ' less4item' : '')" >-->
    <!--<div class="bdhandle">-->
  
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
  </div>

</div>  
