<div class="story-container">
  <div class="edit">
    <icon-button
      [icon]="editMode ? 'cross' : 'edit'"
      (click)="editMode ? cancel() : edit()"
    ></icon-button>
  </div>
  <div class="title">Hintergrundgeschichte</div>

  @if (characterData.backgroundStory != "" && !editMode) {
    <div class="t-2" [innerHTML]="characterData.backgroundStory"></div>
  } @else if (editMode) {
    <div class="NgxEditor__Wrapper t-15">
      <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
      <ngx-editor
        [editor]="editor"
        [(ngModel)]="editBackgroundStory"
        placeholder="Hier kann die Hintergrundgeschichte erzählt werden."
      ></ngx-editor>
    </div>
    <div class="horizontal-buttons" style="justify-content: space-around">
      <ui-button
        [color]="'green'"
        [width]="'w15'"
        [type]="'apply'"
        (click)="update()"
      ></ui-button>
      <ui-button
        [color]="'red'"
        [width]="'w15'"
        [type]="'discard'"
        (click)="cancel()"
      ></ui-button>
    </div>
  } @else {
    {{ "character.story.editStory" | translate }}
    <button (click)="edit()">{{ "character.story.edit" | translate }}</button>
  }
</div>
