DNDTools/src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.html

<div class="dimensions">
  <div class="title">
    @if (isUpdate && !isAddedFromCharacter) {
      {{ "traits.modal.editTrait" | translate }}
    } @else {
      {{ "traits.modal.addTrait" | translate }}
    }
  </div>
  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
  <div class="flex-form t-15">
    <div>
      <div class="input-label">{{ "modal.name" | translate }}</div>
      <mat-form-field appearance="outline" class="w-50">
        <input matInput [(ngModel)]="name" />
      </mat-form-field>
    </div>

    <div>
      <div class="input-label">{{ "modal.shortDescription" | translate }}</div>
      <div class="NgxEditor__Wrapper">
        <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
        </ngx-editor-menu>
        <ngx-editor
          [editor]="shortEditor"
          [(ngModel)]="shortDescription"
          [placeholder]="'traits.modal.shortPlaceholder' | translate"
        ></ngx-editor>
      </div>
      <div class="hint">{{ "traits.modal.shortHint" | translate }}</div>
    </div>

    <div>
      <div class="input-label">{{ "modal.longDescription" | translate }}</div>
      <div class="NgxEditor__Wrapper">
        <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
        </ngx-editor-menu>
        <ngx-editor
          [editor]="longEditor"
          [(ngModel)]="longDescription"
          [placeholder]="'traits.modal.longPlaceholder' | translate"
        ></ngx-editor>
      </div>
      <div class="hint">{{ "traits.modal.longHint" | translate }}</div>
    </div>

    <div class="horizontal-buttons">
      @if (isUpdate && !isAddedFromCharacter) {
        <ui-button
          [color]="'green'"
          [type]="'apply'"
          style="width: 45%"
          (click)="update()"
        ></ui-button>
      } @else {
        <ui-button style="width: 45%" (click)="add()"
          >{{ "buttons.add" | translate }}
        </ui-button>
      }
      <ui-button style="width: 45%" (click)="cancel()"
        >{{ "buttons.cancel" | translate }}
      </ui-button>
    </div>
  </div>
</div>