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

<div class="dimensions">
  <div class="title">
    @if (isUpdate && !isAddedFromCharacter) {
      {{ "abilities.modal.editAbility" | translate }}
    } @else {
      {{ "abilities.modal.addAbility" | translate }}
    }
  </div>

  <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]="'abilities.modal.shortPlaceholder' | translate"
        ></ngx-editor>
      </div>
      <div class="hint">{{ "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]="'abilities.modal.shortPlaceholder' | translate"
        ></ngx-editor>
      </div>
      <div class="hint">{{ "modal.longHint" | translate }}</div>
    </div>

    <div class="row">
      <div class="w-100">
        <div class="input-label">{{ "modal.cost" | translate }}</div>

        <mat-form-field appearance="outline" class="w-100">
          <!-- <mat-label>Kosten</mat-label> -->
          <mat-select [(ngModel)]="cost">
            @for (cost of costs; track cost) {
              <mat-option [value]="cost">{{
                "time." + cost | translate
              }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>

      <div class="w-100">
        <div class="input-label">{{ "modal.uses" | translate }}</div>
        <mat-form-field appearance="outline" class="w-100">
          <!-- <mat-label>Nutzungen</mat-label> -->
          <mat-select [(ngModel)]="charges">
            @for (charge of chargesArray; track charge) {
              <mat-option [value]="charge">
                @if (charge === 0) {
                  {{ "uses." + charge | translate }}
                } @else {
                  {{ charge }}
                }
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      </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>