<div class="row">
  <div class="col-12 col-md-6">
    <div class="row">
      <div class="col-12">
        <div *ngIf="question.canAddAnsweroptions"
             class="row">
          <div class="col-12">
            <div id="add-default-answer"
                 class="p-2 my-2 rounded text-center pointer"
                 data-step="2"
                 (click)="addAnswer()"
                 [attr.data-intro]="'component.answeroptions.description.default_answer_row' | translate"
                 [attr.aria-label]="'component.answeroptions.description.default_answer_row' | translate">
              <p class="mb-0"
                 [innerHTML]="'component.answeroptions.new_answer' | translate"></p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12"
               [attr.data-intro]="'component.answeroptions.description.added_answers' | translate"
               [attr.aria-label]="'component.answeroptions.description.added_answers' | translate"
               data-step="1"
               role="list">
            <div *ngFor="let elem of question.answerOptionList; let i = index"
                 class="btn-group mb-2 d-flex">
              <span (click)="deleteAnswer(i)"
                    class="delete-icon px-2 rounded-left">
                <i class="fas fa-trash pointer h-100 d-flex align-items-center"></i>
              </span>
              <input type="text"
                     class="btn-block text-left px-2 border-0"
                     [value]="elem.answerText"
                     (input)="updateAnswerValue($event, i)"
                     (propertychange)="updateAnswerValue($event, i)">
              <label *ngIf="question.TYPE !== 'SurveyQuestion'"
                     class="btn pointer mb-0"
                     [class.btn-success]="elem.isCorrect"
                     [class.btn-danger]="!elem.isCorrect">
                <input type="checkbox"
                       class="hidden"
                       [attr.aria-label]="'component.answeroptions.description.is_correct' | translate"
                       autocomplete="off"
                       role="switch"
                       [checked]="elem.isCorrect"
                       (change)="elem.isCorrect = !elem.isCorrect"
                       [title]="'component.answeroptions.is_correct' | translate">
                <span *ngIf="elem.isCorrect">{{'component.answeroptions.correct'}}</span>
                <span *ngIf="!elem.isCorrect">{{'component.answeroptions.wrong'}}</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 my-4">
        <div class="row">
          <div class="col-12 mb-2 d-flex"
               [attr.data-intro]="'component.answeroptions.description.show_answer_content_on_buttons' | translate">
            <p class="mb-0 mr-2 text-light align-self-center"
               style="width: 100%;line-height: 1.2;"
               [innerHTML]="'component.answeroptions.show_answer_content_on_buttons' | translate"></p>
            <label class="btn pointer mb-0 align-self-center"
                   [class.btn-success]="question.displayAnswerText"
                   [class.btn-danger]="!question.displayAnswerText">
              <input type="checkbox"
                     class="hidden"
                     id="config_showAnswerContentOnButtons_switch"
                     [attr.aria-label]="'component.answeroptions.description.show_answer_content_on_buttons' | translate"
                     autocomplete="off"
                     role="switch"
                     [checked]="question.displayAnswerText"
                     (change)="toggleShowAnswerContentOnButtons()"
                     [title]="'component.answeroptions.show_answer_content_on_buttons' | translate">
              <span *ngIf="question.displayAnswerText">{{'component.answeroptions.free_text_question.onText' | translate}}</span>
              <span *ngIf="!question.displayAnswerText">{{'component.answeroptions.free_text_question.offText' | translate}}</span>
            </label>
          </div>
          <div class="col-12 mb-2 d-flex answerOptionConfig"
               [attr.data-intro]="'component.answeroptions.description.show_one_answer_per_row' | translate">
            <p class="mb-0 mr-2 text-light align-self-center"
               style="width: 100%;line-height: 1.2;"
               [innerHTML]="'component.answeroptions.show_one_answer_per_row' | translate"></p>
            <label class="btn pointer mb-0 align-self-center"
                   [class.btn-success]="question.showOneAnswerPerRow"
                   [class.btn-danger]="!question.showOneAnswerPerRow">
              <input type="checkbox"
                     class="hidden"
                     id="config_showOneAnswerPerRow_switch"
                     [attr.aria-label]="'component.answeroptions.description.show_one_answer_per_row' | translate"
                     autocomplete="off"
                     role="switch"
                     [checked]="question.showOneAnswerPerRow"
                     (change)="toggleShowOneAnswerPerRow()"
                     [title]="'component.answeroptions.show_one_answer_per_row' | translate">
              <span *ngIf="question.showOneAnswerPerRow">{{'component.answeroptions.free_text_question.onText' | translate}}</span>
              <span *ngIf="!question.showOneAnswerPerRow">{{'component.answeroptions.free_text_question.offText' | translate}}</span>
            </label>
          </div>
          <div *ngIf="question.TYPE === 'SurveyQuestion'"
               class="col-12 mb-2 d-flex answerOptionConfig"
               [attr.data-intro]="'component.answeroptions.description.multiple_selection_survey' | translate">
            <p class="mb-0 mr-2 text-light align-self-center"
               style="width: 100%;line-height: 1.2;"
               [innerHTML]="'component.answeroptions.multiple_selection_survey' | translate"></p>
            <label class="btn pointer mb-0 align-self-center"
                   [class.btn-success]="question.multipleSelectionEnabled"
                   [class.btn-danger]="!question.multipleSelectionEnabled">
              <input type="checkbox"
                     class="hidden"
                     id="config_multipleSelectionSurvey_switch"
                     [attr.aria-label]="'component.answeroptions.description.multiple_selection_survey' | translate"
                     autocomplete="off"
                     role="switch"
                     [checked]="question.multipleSelectionEnabled"
                     (change)="toggleMultipleSelectionSurvey()"
                     [title]="'component.answeroptions.multiple_selection_survey' | translate">
              <span *ngIf="question.multipleSelectionEnabled">{{'component.answeroptions.free_text_question.onText' | translate}}</span>
              <span *ngIf="!question.multipleSelectionEnabled">{{'component.answeroptions.free_text_question.offText' | translate}}</span>
            </label>
          </div>
        </div>
      </div>
      <div class="col-12">
        <p class="text-light text-center"
           id="emojiInfo"
           [innerHTML]="'component.answeroptions.emoji_info' | translate"></p>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6">
    <div class="d-flex justify-content-center mt-5 mt-md-0">
      <app-live-preview
        [targetDevice]="DEVICE_TYPE.XS"
        [targetEnvironment]="ENVIRONMENT_TYPE.ANSWEROPTIONS"></app-live-preview>
    </div>
  </div>
</div>
