<div class="p-box" *ngFor="let word of item.contentObj.wordnum;index as num;">
  <nz-card nzTitle="Word Spelling  [{{num + 1}} / {{item.contentObj?.wordnum?.length}}]" [nzExtra]="extraTemplate">
    <div>
      <div class="spelling-box" *ngFor="let box of defaultBoxes; index as i">

        <div *ngIf="word.words[i]">

          <div class="w-radio"
               (click)="select(i,num)">
            <div class="r-radio"
                 [class.green]="word.words[i].selected"></div>
          </div>
          <input class="p-letter-input" name="Input" type="text" maxlength="4" tabindex="0"
                 [(ngModel)]="word.words[i].value"
                 (blur)="inputSave($event)"
                 (keyup)="keyup($event,word.words[i].value,num);">

        </div>

      </div>
      <span class="p-hint">
        1. Type letters of word in left <br>
        2. Press Enter to confirm <br>
        3. Click round point to set 'Missing Letter'
      </span>
    </div>
    <div class="mt-3">
      <div class="show" *ngFor="let it of word.words">
        <div *ngIf="it.selected" class="blank"><p></p></div>
        <div *ngIf="!it.selected"><p>{{it.value}}</p></div>
      </div>



    </div>



    <nz-divider></nz-divider>


    <app-audio-recorder
      [audioUrl]="item.contentObj['audio_word']"
      (audioUploaded)="onVocabularyAudioUploadSuccess($event, 'audio_word')"
    ></app-audio-recorder>



    <!--<div class="p-media-box d-flex">-->
    <!--<div>-->
    <!--<app-upload-image-with-preview [picId]="word.pic_id"-->
    <!--(imageUploaded)="onImageUploadSuccess($event, num)"-->
    <!--&gt;</app-upload-image-with-preview>-->
    <!--</div>-->
    <!--<nz-divider nzType="vertical"></nz-divider>-->
    <!--<div>-->
    <!--<app-audio-recorder-->
    <!--[audioId]="word.spelling_audio"-->
    <!--(audioUploaded)="onVocabularyAudioUploadSuccess($event,num)"-->
    <!--&gt;</app-audio-recorder>-->
    <!--</div>-->
    <!--</div>-->
  </nz-card>

  <ng-template #extraTemplate>
    <!--<button nz-button nzType="danger" nz-popconfirm nzTitle="Are you sure ?" (nzOnConfirm)="DeletWord(num)">Delete-->
    <!--</button>-->
  </ng-template>
</div>

<div nz-row  nzType="flex" nzJustify="start" nzAlign="top" >

  <div nz-col nzSpan="12">

    <div class="show" style="display: flex; flex-direction: column;"
         *ngFor="let it of selectedArr; let i = index">
      <div style="display: flex; align-items: center">
        <p style="margin-left: 0.8rem; margin-right: 50px;">{{it.value}}: </p>
        <app-audio-recorder
          [audioUrl]="it.audio"
          (audioUploaded)="onAudioUploadSuccessSelected($event, i)"
        ></app-audio-recorder>
      </div>

    </div>

    <div style="display: flex; align-items: center" *ngFor="let it of options; let i = index">

      <input class="p-letter-options" type="text" maxlength="4"
             [(ngModel)]="options[i].value"
             (keyup)="setWrongOptions($event, i)">

      <app-audio-recorder
        [audioUrl]="it.audio"
        (audioUploaded)="onAudioUploadSuccessOptions($event, i)"
      ></app-audio-recorder>

    </div>
  </div>


  <div  nz-col nzSpan="10">

    <app-upload-image-with-preview
      [picUrl]="item.contentObj.pic_res_id"
      (imageUploaded)="onHandleOptionItemImage($event)"
    >
    </app-upload-image-with-preview>

  </div>



</div>

<!--<button nz-button nzType="primary" (click)="AddWord()">-->
<!--+ Add Word-->
<!--</button>-->
