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

<div class="modal-dimensions">
  <h1 style="text-align: center">Hinweis</h1>
  <p style="text-align: center">
    Diese Seite ist momentan nur eingeschränkt funktionsbereit.
  </p>
  <h4>Werkzeuge</h4>
  <div style="display: flex; flex-direction: column; gap: 0.5rem">
    <ng-container
      *ngFor="let tool of proficiencies.tools; let toolIndex = index"
    >
      <div>
        <input type="text" [(ngModel)]="proficiencies.tools[toolIndex]" />
        <icon
          [size]="'s'"
          [type]="'UI'"
          [icon]="'remove'"
          [class]="'pointer'"
          (click)="deleteTool(toolIndex)"
        ></icon>
      </div>
    </ng-container>
    <icon
      [size]="'s'"
      [type]="'UI'"
      [icon]="'add'"
      [class]="'pointer'"
      (click)="addTool()"
    ></icon>
  </div>

  <br />
  <br />
  <h4>Sprachen</h4>
  <div style="display: flex; flex-direction: column; gap: 0.5rem">
    <ng-container
      class="example-box"
      *ngFor="let tool of proficiencies.languages; let languageIndex = index"
    >
      <div>
        <input
          type="text"
          [(ngModel)]="proficiencies.languages[languageIndex]"
        />
        <icon
          [size]="'s'"
          [type]="'UI'"
          [icon]="'remove'"
          [class]="'pointer'"
          (click)="deleteLanguage(languageIndex)"
        ></icon>
      </div>
    </ng-container>
    <icon
      [size]="'s'"
      [type]="'UI'"
      [icon]="'add'"
      [class]="'pointer'"
      (click)="addLanguage()"
    ></icon>
  </div>

  <div class="button-wrapper-2-block">
    <ui-button
      [type]="'update'"
      [size]="'xlarge'"
      [color]="'primary'"
      (click)="update()"
    ></ui-button>
    <ui-button
      [type]="'dismiss'"
      [size]="'xlarge'"
      [color]="'primary'"
      (click)="cancel()"
    ></ui-button>
  </div>
</div>