<div class="dimensions">
  <div class="title">
    @if (isModification) {
      {{ "spellmodal.edit" | translate }}
    } @else {
      {{ "spellmodal.add" | translate }}
    }
  </div>

  <div class="content b-0">
    <div class="input-label">{{ "spellmodal.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="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
          <label for="verbal">{{ "spellmodal.verbal" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="somatic" type="checkbox" [(ngModel)]="needsSomatic" />
          <label for="somatic">{{ "spellmodal.somatic" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="material" type="checkbox" [(ngModel)]="needsMaterial" />
          <label for="material">{{ "spellmodal.material" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input
            id="concentration"
            type="checkbox"
            [(ngModel)]="needsConcentration"
          />
          <label for="concentration">{{
            "spellmodal.concentration" | translate
          }}</label>
        </div>
        <div class="checkbox-row">
          <input id="isRitual" type="checkbox" [(ngModel)]="isRitual" />
          <label for="isRitual">{{ "spellmodal.isRitual" | translate }}</label>
        </div>
      </div>
      <div class="checkbox-column">
        <div class="checkbox-row">
          <input id="doesDamage" type="checkbox" [(ngModel)]="doesDamage" />
          <label for="doesDamage">{{ "spellmodal.damage" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="doesHeal" type="checkbox" [(ngModel)]="doesHeal" />
          <label for="doesHeal">{{ "spellmodal.heal" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
          <label for="isRanged">{{ "spellmodal.hasRange" | translate }}</label>
        </div>
        <div class="checkbox-row">
          <input
            id="hasAreaOfEffect"
            type="checkbox"
            [(ngModel)]="hasAreaOfEffect"
          />
          <label for="hasAreaOfEffect">{{
            "spellmodal.hasAreaOfEffect" | translate
          }}</label>
        </div>

        <div class="checkbox-row">
          <input
            id="needsSavingThrow"
            type="checkbox"
            [(ngModel)]="needsSavingThrow"
            (change)="unselectAttackRoll()"
          />
          <label for="needsSavingThrow">{{
            "spellmodal.needsSavingThrow" | translate
          }}</label>
        </div>
        <div class="checkbox-row">
          @if (!needsSavingThrow) {
            <input
              id="needsAttackRoll"
              type="checkbox"
              [(ngModel)]="needsAttackRoll"
            />
            <label for="needsAttackRoll">{{
              "spellmodal.needsAttackRoll" | translate
            }}</label>
          } @else {
            <label>{{ "general.attribute" | translate }}</label>
            <mat-form-field appearance="outline">
              <mat-select [(ngModel)]="savingThrowAttribute">
                @for (attribute of translator.attributes; track school) {
                  <mat-option [value]="savingThrowAttribute">{{
                    "attributes." + attribute | translate
                  }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
          }
        </div>
      </div>

      <div class="checkbox-column">
        <div class="input-row duration" display="display: flex">
          <label>{{ "spellmodal.cost" | translate }}</label>
          <div
            style="display: flex; justify-content: space-between; width: 11rem"
          >
            <mat-form-field class="time" appearance="outline">
              <input
                [disabled]="
                  cost === 'action' || cost === 'bonus' || cost === 'reaction'
                "
                type="number"
                matInput
                [(ngModel)]="timeToCast"
              />
            </mat-form-field>
            <mat-form-field class="unit" appearance="outline">
              <mat-select
                [(ngModel)]="cost"
                (selectionChange)="checkWhichCostWasSelected()"
              >
                @for (cost of costs; track cost) {
                  <mat-option [value]="cost">{{
                    "time." + cost | translate
                  }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
          </div>
        </div>

        <div class="input-row duration" display="display: flex">
          <label>{{ "spellmodal.duration" | translate }}</label>
          <div
            style="display: flex; justify-content: space-between; width: 11rem"
          >
            <mat-form-field class="time" appearance="outline">
              <input
                [disabled]="
                  durationtype === 'instant' || durationtype === 'permanent'
                "
                type="number"
                matInput
                [(ngModel)]="duration"
              />
            </mat-form-field>
            <mat-form-field class="unit" appearance="outline">
              <mat-select
                [(ngModel)]="durationtype"
                (selectionChange)="checkIfInstant()"
              >
                @for (type of translator.durationTypes; track type) {
                  <mat-option [value]="type">{{
                    "time." + type | translate
                  }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
          </div>
        </div>

        <div class="input-row">
          <label>{{ "spellmodal.level" | translate }}</label>
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="level">
              @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
                <mat-option [value]="level">{{ level }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="input-row">
          <label>{{ "spellmodal.school" | translate }}</label>
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="school">
              @for (school of translator.schools; track school) {
                <mat-option [value]="school">{{
                  "schools." + school | translate
                }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </div>

    <hr />

    <!-- TAB-PANEL -->
    <div class="d-flex">
      <div
        ngbNav
        #nav="ngbNav"
        [(activeId)]="active"
        class="flex-column navigation-bar"
        orientation="vertical"
      >
        <!-- DAMAGE -->
        <ng-container ngbNavItem="damage">
          @if (doesDamage) {
            <button ngbNavLink>{{ "spellmodal.damage" | translate }}</button>
          } @else {
            <button class="disabled-button" disabled>
              {{ "spellmodal.damage" | translate }}
            </button>
          }
          <ng-template ngbNavContent>
            <div class="tab-content 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) {
                      {{ "spellmodal.damage" | translate }}
                    } @else {
                      {{ "spellmodal.additionalDamage" | translate }}
                    }
                  </div>
                  <div class="input-label">
                    {{ "general.diceNumber" | translate }}
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="damageEntry.diceNumber">
                      @for (
                        number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                        track number
                      ) {
                        <mat-option [value]="number"> {{ number }} </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>

                  <div class="input-label t-05">
                    {{ "general.diceType" | translate }}
                  </div>
                  <mat-form-field appearance="outline">
                    <mat-select [(ngModel)]="damageEntry.diceType">
                      @for (die of [4, 6, 8, 10, 12, 20, 100]; 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 translator.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>
                  }
                </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>
        <!-- HEAL -->
        <ng-container ngbNavItem="heal">
          @if (doesHeal) {
            <button ngbNavLink>{{ "spellmodal.heal" | translate }}</button>
          } @else {
            <button class="disabled-button" disabled>
              {{ "spellmodal.heal" | translate }}
            </button>
          }
          <ng-template ngbNavContent>
            <div class="tab-content t-05">
              <div class="input-label">
                {{ "general.diceNumber" | translate }}
              </div>
              <mat-form-field appearance="outline">
                <mat-select [(ngModel)]="heal.diceNumber">
                  @for (
                    number of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                    track number
                  ) {
                    <mat-option [value]="number">{{ number }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>

              <div class="input-label">
                {{ "general.diceType" | translate }}
              </div>
              <mat-form-field appearance="outline">
                <mat-select [(ngModel)]="heal.diceType">
                  @for (die of [4, 6, 8, 10, 12, 20, 100]; track die) {
                    <mat-option [value]="die"
                      >{{ "general.dice" | translate }}{{ die }}</mat-option
                    >
                  }
                </mat-select>
              </mat-form-field>
            </div>
          </ng-template>
        </ng-container>
        <!-- RANGE -->
        <ng-container ngbNavItem="range">
          @if (isRanged || hasAreaOfEffect) {
            <button ngbNavLink>{{ "spellmodal.range" | translate }}</button>
          } @else {
            <button class="disabled-button" disabled>
              {{ "spellmodal.range" | translate }}
            </button>
          }
          <ng-template ngbNavContent>
            <div class="range-container">
              <div class="input-label">
                {{ "spellmodal.range" | translate }}
              </div>
              <mat-form-field appearance="outline">
                <input type="number" matInput [(ngModel)]="range" />
                <span class="suffix" matTextSuffix>{{
                  "general.feet" | translate
                }}</span>
              </mat-form-field>
              @if (hasAreaOfEffect) {
                <div class="input-label">
                  {{ "areaTypes.areaType" | translate }}
                </div>
                <mat-form-field appearance="outline">
                  <mat-select [(ngModel)]="areaOfEffectType">
                    @for (areaType of translator.areaTypes; track areaType) {
                      <mat-option [value]="areaType">
                        {{ "areaTypes." + areaType | translate }}
                      </mat-option>
                    }
                  </mat-select>
                </mat-form-field>
                <div class="input-label">
                  {{ "spellmodal.length" | translate }}
                </div>
                <mat-form-field appearance="outline">
                  <input type="number" matInput [(ngModel)]="length" />
                  <span class="suffix" matTextSuffix>{{
                    "general.feet" | translate
                  }}</span>
                </mat-form-field>
              }
            </div>
          </ng-template>
        </ng-container>
        <!-- DESCRIPTION -->
        <ng-container ngbNavItem="description">
          <button ngbNavLink>{{ "spellmodal.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_de"
                [placeholder]="'spellmodal.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 class="b-0" />
  </div>

  <!-- Button section -->
  <div class="horizontal-buttons">
    <ui-button
      [color]="'green'"
      [type]="isModification ? 'apply' : 'add'"
      style="width: 40%"
      (click)="isModification ? update() : add()"
    >
    </ui-button>
    <ui-button
      [color]="'red'"
      [type]="'cancel'"
      style="width: 40%"
      (click)="cancel()"
    >
    </ui-button>
  </div>
</div>
