<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="1" tabindex="0"
                 [(ngModel)]="word.words[i].value"
                 (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>

    <div class="p-media-box d-flex">
      <div>
        <app-upload-image-with-preview [picUrl]="word.pic_id"
                                       (imageUploaded)="onImageUploadSuccess($event, num)"
        ></app-upload-image-with-preview>
      </div>
      <nz-divider nzType="vertical"></nz-divider>
      <div>
        <app-audio-recorder
          [audioUrl]="word.spelling_audio"
          (audioUploaded)="onVocabularyAudioUploadSuccess($event,num)"
        ></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>


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