<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <div *ngIf="!hasClients" i18n>
      There are no available clients.
    </div>
    <form *ngIf="hasClients" appFormSubmit (ngSubmit)="associateClient()"
          [formGroup]="associateClientForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="associateClientForm"></app-form-errors>
      <app-client-autocomplete [control]="selectedClient"
                               [optionsQueryParams]="clientOptionsQueryParams"></app-client-autocomplete>

      <ng-container *ngIf="auth.feature('clients&users.roles') && selectedClient.value && selectedClient.value.id">
        <h2 class="fl-detail" i18n>Select user roles</h2>
        <mat-selection-list formControlName="roles">
          <mat-list-option color="primary" *ngFor="let role of roles" [value]="role.id">{{role.display_name}}</mat-list-option>
        </mat-selection-list>
      </ng-container>
    </form>
  </ng-template>
</app-common-dialog>
