<nz-form-item>
  <nz-form-label [nzSpan]="4">Vocabulary</nz-form-label>
  <nz-form-control [nzSpan]="8">
    <app-upload-image-with-preview
      [picUrl]="item.contentObj.pic_id"
      (imageUploaded)="onHandleQuestionImage($event)"
    ></app-upload-image-with-preview>
    <input type="text" nz-input placeholder="Please input title"
           [(ngModel)]="item.contentObj.title" (blur)="updateQuestionTitle()">
  </nz-form-control>
  <app-audio-recorder [audioUrl]="item.contentObj.question_audio_id"
                      (audioUploaded)="onHandleQuestionOptionItemAudio($event)">
  </app-audio-recorder>
</nz-form-item>
<nz-form-item>
  <nz-form-label [nzSpan]="4">Option</nz-form-label>
  <nz-form-control [nzSpan]="20">
    <button
      nz-button
      nzType="default"
      (click)="addNewOptionItem()"
      [disabled]="options.length >= 4"
    >
      <i class="anticon anticon-plus-circle-o"></i>
      Add
    </button>
    <div class="opt-container">
      <div
        class="opt-wrap"
        *ngFor="let item of options; let i = index"
      >
        <div class="tool-bar">
          <label nz-checkbox [ngModel]="item.right"
                 (ngModelChange)="setRightAnswer(i)" class="right-answer">
            Right
          </label>
          <div class="button-group">
            <button
              nz-button
              nzType="primary"
              nzSize="small"
              nzShape="circle"
              style="margin-right: 1rem;"
              (click)="onHandleSwitchContent(item)"
            >
              <i class="anticon anticon-retweet"></i>
            </button>
            <nz-dropdown [nzTrigger]="'click'">
              <button
                nz-button
                nzType="primary"
                nzSize="small"
                nzShape="circle"
                nz-dropdown
              >
                <i class="anticon anticon-setting"></i>
              </button>
              <ul nz-menu>
                <li nz-menu-item (click)="onMovePage(i, -1)" [class.disabled]="i < 1">
                  <i class="anticon anticon-arrow-up"></i>
                  Move Up
                </li>
                <li nz-menu-item (click)="onMovePage(i, 1)" [class.disabled]="i + 1 >= options.length">
                  <i class="anticon anticon-arrow-down"></i>
                  Move Down
                </li>
                <li nz-menu-item (click)="onDeleteCoursewareItem(i)">
                  <i class="anticon anticon-delete"></i>
                  Delete
                </li>
              </ul>
            </nz-dropdown>
          </div>
        </div>
        <div class="content-editor">
          <input *ngIf="item.type === OPTION_TYPE.TEXT" type="text" nz-input [(ngModel)]="item.text"
                 placeholder="Please input title" (blur)="updateOptionItemText(i)">
          <app-upload-image-with-preview
            *ngIf="item.type === OPTION_TYPE.PIC"
            [picUrl]="item.pic_id"
            (imageUploaded)="onHandleOptionItemImage($event, i)"
          ></app-upload-image-with-preview>
          <app-audio-recorder *ngIf="item.type === OPTION_TYPE.AUDIO"
                              [audioUrl]="item.audio_id"
                              (audioUploaded)="onHandleOptionItemAudio($event, i)">
          </app-audio-recorder>
        </div>
      </div>
    </div>
  </nz-form-control>
</nz-form-item>