<div class="dimensions">
  <div class="title">{{ "proficiencies.modalHeader" | translate }}</div>
  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
  <div class="heading left b-05 t-1">
    {{ "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'"
          style="margin-left: 0.25rem"
          (click)="deleteLanguage(languageIndex)"
        ></icon-button>
      </div>
    }
    <icon-button
      class="add-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
      class="add-button"
      [icon]="'add'"
      (click)="addTool()"
    ></icon-button>
  </div>

  <div class="horizontal-buttons">
    <ui-button style="width: 45%" (click)="update()"
      >{{ "buttons.confirm" | translate }}
    </ui-button>
    <ui-button style="width: 45%" (click)="cancel()"
      >{{ "buttons.cancel" | translate }}
    </ui-button>
  </div>
</div>
