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

<div class="dimensions">
  <div class="title">
    @if (!isUpdate) {
      {{ "inventory.modal.add" | translate }}
    } @else {
      {{ "inventory.modal.edit" | translate }}
    }
  </div>

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

    <div class="flex numbers">
      <div>
        <div class="input-label">{{ "inventory.weight" | translate }}</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">{{ "inventory.quantity" | translate }}</div>
        <mat-form-field appearance="outline" style="width: 7rem">
          <input type="number" class="right" matInput [(ngModel)]="quantity" />
          <span class="input-value" matTextSuffix>{{
            "inventory.modal.pieces" | translate
          }}</span>
        </mat-form-field>
      </div>
      @if (isFood) {
        <div>
          <div class="input-label">{{ "inventory.ready" | translate }}</div>
          <input
            type="checkbox"
            style="margin: 0.5rem 0 0 2.5rem"
            [(ngModel)]="isReady"
          />
        </div>
      } @else {
        <div>
          <div class="input-label">{{ "inventory.value" | translate }}</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]="'inventory.modal.placeholder' | translate"
    ></ngx-editor>
  </div>

  <div class="horizontal-buttons">
    @if (isUpdate) {
      <ui-button style="width: 40%" (click)="update()"
        >{{ "buttons.confirm" | translate }}
      </ui-button>
    } @else {
      <ui-button style="width: 40%" (click)="add()"
        >{{ "buttons.confirm" | translate }}
      </ui-button>
    }
    <ui-button style="width: 40%" (click)="cancel()"
      >{{ "buttons.cancel" | translate }}
    </ui-button>
  </div>
</div>