<div class="proficiency-container">
  <div class="proficiencies">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>{{
            "proficiencies.weapArm" | translate
          }}</mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="proficiencies" (change)="updateDatabase()">
          <div class="centered-line">
            <input id="light" type="checkbox" formControlName="light" />
            <label for="light">{{
              "proficiencies.lightArmor" | translate
            }}</label>
          </div>
          <div class="centered-line">
            <input id="medium" type="checkbox" formControlName="medium" />
            <label for="medium">{{
              "proficiencies.mediumArmor" | translate
            }}</label>
          </div>
          <div class="centered-line">
            <input id="heavy" type="checkbox" formControlName="heavy" />
            <label for="heavy">{{
              "proficiencies.heavyArmor" | translate
            }}</label>
          </div>
          <div class="centered-line">
            <input id="shields" type="checkbox" formControlName="shields" />
            <label for="shields">{{
              "proficiencies.shields" | translate
            }}</label>
          </div>
          <div class="centered-line">
            <input id="simple" type="checkbox" formControlName="simple" />
            <label for="simple">{{
              "proficiencies.simpleWeapons" | translate
            }}</label>
          </div>

          <div class="centered-line">
            <input id="martial" type="checkbox" formControlName="martial" />
            <label for="martial">{{
              "proficiencies.martialWeapons" | translate
            }}</label>
          </div>
          <div class="centered-line">
            <label for="other">{{ "proficiencies.other" | translate }}</label>
            <input id="other" formControlName="other" />
          </div>
        </form>
      </mat-expansion-panel>

      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ "proficiencies.langAndTools" | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <h5 class="left">{{ "proficiencies.languages" | translate }}</h5>
        <div
          cdkDropList
          class="item-list"
          (cdkDropListDropped)="dropLanguages($event)"
        >
          @for (
            language of proficiencies.get("languages")!.value;
            track language
          ) {
            <div class="item" cdkDrag>
              {{ language }}
            </div>
          }
        </div>
        <h5 class="left">{{ "proficiencies.tools" | translate }}</h5>
        <div
          cdkDropList
          class="item-list"
          (cdkDropListDropped)="dropTools($event)"
        >
          @for (tool of proficiencies.get("tools")!.value; track tool) {
            <div class="item" cdkDrag>
              {{ tool }}
            </div>
          }
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </div>

  <!-- MODAL BUTTON -->
  <div class="footer">
    <ui-button
      [color]="'green'"
      [type]="'modify'"
      style="width: 80%"
      (click)="openModal()"
    >
    </ui-button>
  </div>
</div>
