<div class="dimensions">
  <div class="title">{{ "proficiencies.modalHeader" | translate }}</div>
  <div class="heading left b-05">
    {{ "proficiencies.languages" | translate }}
  </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">{{ "proficiencies.tools" | translate }}</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'"
      [type]="'confirm'"
      style="width: 45%"
      (click)="update()"
    >
    </ui-button>
    <ui-button
      [color]="'red'"
      [type]="'cancel'"
      style="width: 45%"
      (click)="cancel()"
    >
    </ui-button>
  </div>
</div>
