<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <div *ngIf="!hasUsers && !data.user_invitation" i18n>
      There are no available users.
    </div>
    <form *ngIf="hasUsers || data.user_invitation" appFormSubmit (ngSubmit)="associateUser()"
          [formGroup]="associateUserForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="associateUserForm"></app-form-errors>
      <app-user-autocomplete *ngIf="!data.user_invitation"
                             [control]="selectedUser"
                             [optionsQueryParams]="userOptionsQueryParams"></app-user-autocomplete>

      <mat-form-field appFlex="90" *ngIf="data.user_invitation">
        <mat-label i18n>User email</mat-label>
        <input matInput placeholder="User email" i18n-placeholder type="email" formControlName="selectedUser" required>
      </mat-form-field>
      <ng-container *ngIf="auth.feature('clients&users.roles') && ((selectedUser.value && selectedUser.value.id) || data.user_invitation); else noRoles">
        <h2 class="fl-detail" i18n>Select user roles</h2>
        <mat-selection-list formControlName="roles">
          <mat-list-option *ngFor="let role of roles" [value]="role.id" color="primary">
            {{role.display_name}}
          </mat-list-option>
        </mat-selection-list>
      </ng-container>
      <ng-template #noRoles>
        <p *ngIf="data.user_invitation" class="fl-detail" i18n>Invited user will have access to all operations related to this client.</p>
        <p *ngIf="!data.user_invitation" class="fl-detail" i18n>Associated user will have access to all operations related to this client.</p>
      </ng-template>

      <ng-container *ngIf="data.notificationsSettings">
        <h2 class="fl-detail fl-margin-top-small fl-margin-bottom-small" i18n>Select notifications settings</h2>
        <p class="fl-detail fl-margin-bottom-small"
           i18n>User won't receive client related notifications until invitation is accepted.</p>
        <div *ngFor="let item of notificationSettingsKeys">
          <div [formGroupName]="item">
            <mat-checkbox formControlName="enabled" [color]="'primary'">
              {{data.notificationsSettings.detail[item].display_name}}
            </mat-checkbox>
          </div>
        </div>
      </ng-container>
    </form>
  </ng-template>
</app-common-dialog>
