DNDTools/src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.html

<div class="dimensions">
  <div class="title">
    @if (isUpdate) {
      {{ "weapons.modal.editWeapon" | translate }}
    } @else {
      {{ "weapons.modal.addWeapon" | translate }}
    }
  </div>

  <div class="content b-0">
    <div class="input-label">{{ "weapons.name" | translate }}</div>
    <mat-form-field appearance="outline" class="w-100">
      <input matInput [(ngModel)]="name" />
    </mat-form-field>
    <hr />

    <div class="flex-row t-1">
      <div class="checkbox-column">
        <div class="checkbox-row">
          <input id="proficient" type="checkbox" [(ngModel)]="proficient" />
          <label for="proficient">{{ "weapons.proficient" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input
            id="useAttributeModifier"
            type="checkbox"
            [(ngModel)]="useAttributeModifier"
          />
          <label for="useAttributeModifier">{{
            "weapons.modal.applyModifier" | translate
          }}</label>
        </div>
        <div class="checkbox-row">
          <input id="finesse" type="checkbox" [(ngModel)]="isFinesse" />
          <label for="finesse">{{ "weapons.finesse" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="versatile" type="checkbox" [(ngModel)]="isVersatile" />
          <label for="versatile">{{ "weapons.versatile" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="isTwohanded" type="checkbox" [(ngModel)]="isTwoHanded" />
          <label for="isTwohanded">{{ "weapons.twoHanded" | translate }}</label>
        </div>
      </div>
      <div class="checkbox-column">
        <div class="checkbox-row">
          <input id="hasReach" type="checkbox" [(ngModel)]="hasReach" />
          <label for="hasReach">{{ "weapons.range" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
          <label for="isRanged">{{ "weapons.ranged" | translate }}</label>
        </div>

        <div class="checkbox-row">
          <input id="canBeThrown" type="checkbox" [(ngModel)]="canBeThrown" />
          <label for="canBeThrown">{{ "weapons.throwable" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="isMagical" type="checkbox" [(ngModel)]="isMagical" />
          <label for="isMagical">{{ "weapons.magical" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input
            id="additionalDamage"
            type="checkbox"
            [(ngModel)]="hasAdditionalDamage"
          />
          <label for="additionalDamage">{{
            "weapons.modal.additionalDamage" | translate
          }}</label>
        </div>
      </div>
    </div>

    <hr />

    <!-- TAB-PANEL -->
    <div class="d-flex">
      <div
        ngbNav
        #nav="ngbNav"
        [(activeId)]="active"
        class="flex-column navigation-bar"
        orientation="vertical"
      >
        <ng-container ngbNavItem="damage">
          <button ngbNavLink>Schaden</button>
          <ng-template ngbNavContent>
            <div class="flex-row">
              <div class="w-50">
                <div class="input-label">
                  {{ "weapons.modal.attackBonus" | translate }}
                </div>
                <mat-form-field appearance="outline">
                  <mat-select [(ngModel)]="attackBonus">
                    @for (attackBonus of attackBonuses; track attackBonus) {
                      <mat-option [value]="attackBonus">{{
                        attackBonus
                      }}</mat-option>
                    }
                  </mat-select>
                </mat-form-field>
              </div>

              @if (isMagical) {
                <div>
                  <div class="input-label">
                    {{ "weapons.modal.magicalModifier" | translate }}
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="magicBonus">
                      @for (magicBonus of [1, 2, 3, 4, 5]; track magicBonus) {
                        <mat-option [value]="magicBonus">
                          +{{ magicBonus }}
                        </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                </div>
              }
            </div>

            <div class="flex-row t-05">
              @for (
                damageEntry of damage;
                let index = $index;
                track damageEntry
              ) {
                <div class="damage-box">
                  <div class="subheading left t-025">
                    @if (index == 0) {
                      {{ "weapons.modal.damage" | translate }}
                    } @else {
                      {{ "weapons.modal.additionalDamage" | translate }}
                    }
                  </div>
                  <div class="input-label">
                    {{ "general.diceNumber" | translate }}
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="damageEntry.diceNumber">
                      @for (number of numbers; track number) {
                        <mat-option [value]="number"> {{ number }} </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>

                  <div class="input-label t-05">
                    {{ "general.diceType" | translate }}
                    @if (isVersatile && index === 0) {
                      ({{ "weapons.oneHanded" | translate }})
                    }
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="damageEntry.diceType">
                      @for (die of dice; track die) {
                        <mat-option [value]="die">
                          {{ "general.dice" | translate }}{{ die }}
                        </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                  @if (isVersatile && index === 0) {
                    <div class="input-label t-05">
                      {{ "general.diceType" | translate }} ({{
                        "weapons.twoHanded" | translate
                      }})
                    </div>
                    <mat-form-field appearance="outline">
                      <mat-select [(ngModel)]="versatileDamage">
                        @for (die of dice; track die) {
                          <mat-option [value]="die">
                            {{ "general.dice" | translate }}{{ die }}
                          </mat-option>
                        }
                      </mat-select>
                    </mat-form-field>
                  }

                  <div class="input-label t-05">
                    {{ "general.damageType" | translate }}
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="damageEntry.damageType">
                      @for (type of damageTypes; track type) {
                        <mat-option [value]="type">
                          {{ "damageTypes." + type | translate }}
                        </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                  @if (index !== 0) {
                    <icon-button
                      [icon]="'delete'"
                      (click)="removeDamage(index)"
                    ></icon-button>
                  } @else if (hasAdditionalDamage) {
                    <div class="input-label t-05">
                      {{ "weapons.modal.additionalDamage" | translate }}
                    </div>
                    <mat-form-field appearance="outline">
                      <mat-select [(ngModel)]="additionalDamage">
                        @for (damage of additonalDamages; track damage) {
                          <mat-option [value]="damage">
                            +{{ damage }}
                          </mat-option>
                        }
                      </mat-select>
                    </mat-form-field>
                  }
                </div>
                @if (damage.length < 2) {
                  <icon-button
                    [icon]="'add'"
                    style="margin-top: 7rem; margin-left: 5rem"
                    (click)="addDamage()"
                  ></icon-button>
                }
              }
            </div>
          </ng-template>
        </ng-container>
        <ng-container ngbNavItem="range">
          @if (isRanged || canBeThrown) {
            <button ngbNavLink>{{ "weapons.range" | translate }}</button>
          } @else {
            <button class="disabled-button" disabled>
              {{ "weapons.range" | translate }}
            </button>
          }
          <ng-template ngbNavContent>
            <div class="numbers">
              @if (isRanged) {
                <div class="flex-row t-1">
                  <div class="w-50">
                    <div class="input-label">
                      {{ "weapons.modal.normalRange" | translate }}
                    </div>
                    <mat-form-field appearance="outline">
                      <input
                        class="right"
                        type="number"
                        matInput
                        [(ngModel)]="range[0]"
                      />
                      <span class="input-value" matTextSuffix>{{
                        "general.feet" | translate
                      }}</span>
                    </mat-form-field>
                  </div>
                  <div>
                    <div class="input-label">
                      {{ "weapons.modal.extendedRange" | translate }}
                    </div>
                    <mat-form-field appearance="outline">
                      <input
                        class="right"
                        type="number"
                        matInput
                        [(ngModel)]="range[1]"
                      />
                      <span class="input-value" matTextSuffix>{{
                        "general.feet" | translate
                      }}</span>
                    </mat-form-field>
                  </div>
                </div>
              }
              @if (canBeThrown) {
                <div class="flex-row t-2">
                  <div class="w-50">
                    <div class="input-label">
                      {{ "weapons.modal.normalThrowRange" | translate }}
                    </div>
                    <mat-form-field appearance="outline">
                      <input
                        class="right"
                        type="number"
                        matInput
                        [(ngModel)]="throwRange[0]"
                      />
                      <span class="input-value" matTextSuffix>{{
                        "general.feet" | translate
                      }}</span>
                    </mat-form-field>
                  </div>
                  <div>
                    <div class="input-label">
                      {{ "weapons.modal.extendedThrowRange" | translate }}
                    </div>
                    <mat-form-field appearance="outline">
                      <input
                        class="right"
                        type="number"
                        matInput
                        [(ngModel)]="throwRange[1]"
                      />
                      <span class="input-value" matTextSuffix>{{
                        "general.feet" | translate
                      }}</span>
                    </mat-form-field>
                  </div>
                </div>
              }
            </div>
          </ng-template>
        </ng-container>
        <ng-container ngbNavItem="description">
          <button ngbNavLink>{{ "general.description" | translate }}</button>
          <ng-template ngbNavContent>
            <div class="NgxEditor__Wrapper">
              <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
              </ngx-editor-menu>
              <ngx-editor
                [editor]="editor"
                [(ngModel)]="description"
                [placeholder]="'weapons.modal.placeholder' | translate"
              ></ngx-editor>
            </div>
          </ng-template>
        </ng-container>
      </div>

      <div
        [ngbNavOutlet]="nav"
        style="
          width: 100%;
          min-height: 20rem;
          max-height: 26rem;
          overflow-y: auto;
          overflow-x: hidden;
        "
        class="ms-4"
      ></div>
    </div>

    <hr style="margin-bottom: 0" />
  </div>

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