<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div *ngIf="answer && answer.currentAnswer()">
  <div *ngIf="!fullDisplay">
    <span class="simple">{{ answer.simpleTextView(wide) }}</span>
    <button
      *ngIf="editable"
      nbButton
      ghost
      shape="round"
      nbTooltip="Edit {{ answerLabel }}"
      [size]="editableIconSize"
      (click)="$event.stopPropagation(); editAnswer()"
    >
      <nb-icon icon="chat-right-quote"></nb-icon>
    </button>
  </div>

  <div
    *ngIf="fullDisplay"
    class="fullDisplay"
  >
    <tock-form-control
      label="Type"
      name="answer-type-label"
    >
      <nb-radio-group
        [(ngModel)]="answerType"
        (ngModelChange)="changeType($event)"
        class="d-flex"
      >
        <nb-radio value="0"> Simple </nb-radio>
        <nb-radio
          *ngIf="shared.configuration && shared.configuration.compilerAvailable"
          value="2"
        >
          Script
        </nb-radio>
      </nb-radio-group>
    </tock-form-control>

    <div *ngIf="answer.isSimpleAnswer()">
      <tock-simple-answer
        [container]="answer"
        [submit]="submit"
        [answerLabel]="answerLabel"
      ></tock-simple-answer>
    </div>
    <div *ngIf="answer.isScriptAnswer()">
      <tock-script-answer [container]="answer"></tock-script-answer>
    </div>
  </div>
</div>
