DNDTools/src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.html

<div class="dimensions">
  <div class="title">
    @if(!isUpdate){Gegenstand erstellen}@else{Gegenstand bearbeiten}
  </div>

  <div class="flex-form t-15">
    <div>
      <div class="input-label">Name</div>
      <mat-form-field appearance="outline" style="width: 18.9rem">
        <input matInput [(ngModel)]="name" />
      </mat-form-field>
    </div>

    <div class="flex-row numbers">
      <div>
        <div class="input-label">Gewicht</div>
        <mat-form-field appearance="outline" style="width: 7rem">
          <input type="number" class="right" matInput [(ngModel)]="weight" />
          <span class="input-value" matTextSuffix>Lb.</span>
        </mat-form-field>
      </div>
      <div>
        <div class="input-label">Anzahl</div>
        <mat-form-field appearance="outline" style="width: 7rem">
          <input type="number" class="right" matInput [(ngModel)]="quantity" />
          <span class="input-value" matTextSuffix>Stk.</span>
        </mat-form-field>
      </div>
      @if(isFood){
      <div>
        <div class="input-label">Verzehrfertig</div>
        <input
          type="checkbox"
          style="margin: 0.5rem 0 0 2.5rem"
          [(ngModel)]="isReady"
        />
      </div>
      } @else {
      <div>
        <div class="input-label">Wert</div>
        <mat-form-field appearance="outline" style="width: 7rem">
          <input type="number" class="right" matInput [(ngModel)]="value" />
          <span class="input-value" matTextSuffix>Gold</span>
        </mat-form-field>
      </div>
      }
    </div>
  </div>

  <div class="NgxEditor__Wrapper t-15">
    <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
    <ngx-editor
      [editor]="editor"
      [(ngModel)]="description"
      placeholder="Beschreibung des Gegenstandes"
    ></ngx-editor>
  </div>

  <div class="horizontal-buttons">
    @if(isUpdate){
    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
      Bestätigen
    </ui-button>
    }@else{
    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
      Bestätigen
    </ui-button>
    }
    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
      Abbrechen
    </ui-button>
  </div>
</div>