<form [formGroup]="userForm" class="form-with-label">

  <div class="d-flex justify-content-between align-items-center mb-3">

    <h3
      mat-dialog-title
      class="my-0">Edit user {{data?.user?.username}}</h3>

    <button
      mat-button
      color="primary"
      (click)="addField()"
      type="button">
      Add field
    </button>

  </div>

  <div mat-dialog-content>
    <div class="row">
      <div class="col-md-6 col-12">

        <mat-form-field class="w-100">

          <span
            matPrefix
            matTooltip="Roles user belongs to"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>shield</mat-icon>
            <span class="text-muted">|</span>
          </span>

          <mat-select
            [formControl]="rolesCtrl"
            multiple>

            <mat-select-trigger>
              {{rolesCtrl.value ? rolesCtrl.value[0] : ''}}
              <span *ngIf="rolesCtrl.value?.length > 1">
                + {{rolesCtrl.value.length - 1}} more
              </span>
            </mat-select-trigger>

            <mat-option
              class="multiline-mat-option"
              *ngFor="let role of rolesList"
              [value]="role.name"
              (click)="toggleRole(role.name)">
              <span class="d-block name-line">{{role.name}}</span>
              <span class="d-block description-line">{{role.description}}</span>
            </mat-option>

          </mat-select>

        </mat-form-field>

      </div>

      <div class="col-md-6 col-12" *ngFor="let item of formData">

        <mat-form-field class="w-100">
          <span
            matPrefix
            [matTooltip]="item.type"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>edit</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            [formControlName]="item.type"
            [name]="item.type">
          <button
            matSuffix
            mat-icon-button
            color="warn"
            type="button"
            (click)="deleteField(item.type)">
            <mat-icon>delete</mat-icon>
          </button>
        </mat-form-field>

      </div>

    </div>
  </div>


  <div mat-dialog-actions [align]="'end'">

    <button
      mat-dialog-close
      mat-button
      color="primary"
      type="button">
      Close
    </button>

    <button
      mat-flat-button
      color="primary"
      (click)="saveFields()"
      type="submit">
      Save
    </button>

  </div>
</form>