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

<div class="dimensions">
  <div class="title">Sprachen und Werkzeuge hinzufügen</div>
  <div class="heading left b-05">Sprachen</div>
  <div style="display: flex; flex-direction: column; gap: 0.5rem">
    @for(tool of proficiencies.languages; let languageIndex = $index; track
    tool){
    <div class="item-row">
      <mat-form-field appearance="outline">
        <input matInput [(ngModel)]="proficiencies.languages[languageIndex]" />
      </mat-form-field>
      <icon-button
        [icon]="'delete'"
        (click)="deleteLanguage(languageIndex)"
      ></icon-button>
    </div>
    }
    <icon-button [icon]="'add'" (click)="addLanguage()"></icon-button>
  </div>

  <div class="heading left b-05">Werkzeuge</div>
  <div style="display: flex; flex-direction: column; gap: 0.5rem">
    @for(tool of proficiencies.tools; let toolIndex = $index; track tool){
    <div class="item-row">
      <mat-form-field appearance="outline">
        <input matInput [(ngModel)]="proficiencies.tools[toolIndex]" />
      </mat-form-field>
      <icon-button
        style="margin-left: 0.25rem"
        [icon]="'delete'"
        (click)="deleteTool(toolIndex)"
      ></icon-button>
    </div>
    }
    <icon-button [icon]="'add'" (click)="addTool()"></icon-button>
  </div>

  <div class="horizontal-buttons">
    <ui-button [color]="'green'" style="width: 45%" (click)="update()">
      Aktualisieren
    </ui-button>
    <ui-button [color]="'red'" style="width: 45%" (click)="cancel()">
      Abbrechen
    </ui-button>
  </div>
</div>