<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="roleAssignmentForm">
    <app-form-errors #formErrors [formGroup]="roleAssignmentForm"></app-form-errors>

    <div formArrayName="assignments"
         *ngFor="let assignment of roleAssignmentForm.controls.assignments['controls']; let i = index;">
      <div [formGroupName]="i">
        <div layoutAlign="row" appLayoutGap="10px">
          <app-autocomplete appFlex="50" [control]="assignments['controls'][i]['controls'].user"
                            [placeholderUnselected]="userUnselectedPlaceholder"
                            [placeholderSelected]="userSelectedPlaceholder"
                            [switchMapHandler]="userOptionsSwitchMap"></app-autocomplete>
          <mat-form-field appFlex="50">
            <mat-label i18n>Roles</mat-label>
            <mat-select formControlName="roles" placeholder="Roles" i18n-placeholder multiple>
              <mat-option *ngFor="let role of availableRoles" [value]="role.name">
                {{ role.name }}
              </mat-option>
            </mat-select>
            <mat-error>
              {{ assignments['controls'][i]['controls'].roles.errors | errorFormatter }}
            </mat-error>
          </mat-form-field>
          <a mat-icon-button fl-tooltip="Remove role assignment" i18n-fl-tooltip
             class="fl-margin-top-small"
             fl-tooltip-direction="left"
             (click)="removeRoleAssignment(i)" appFlex="50px">
            <mat-icon>delete</mat-icon>
          </a>
        </div>
      </div>
    </div>
    <div layoutDirection="row" appLayoutGap="10px" layoutAlign="center center">
      <a mat-mini-fab (click)="addRoleAssignment()" class="add-item-button" color="primary">
        <mat-icon>add</mat-icon>
      </a>
      <p i18n>
        Add role assignment
      </p>
    </div>
  </form>
</div>
