@if (requiredData$ | async) {<ng-container></ng-container>}
@if (detail$ | async) {<ng-container></ng-container>}
<!-- Added condition to check for undefined since tempPass$ is a *void* observable -->
@if ((tempPass$ | async) !== undefined) {<ng-container></ng-container>}
@if (saveResult$ | async) {<ng-container></ng-container>}
@if (deleteResult$ | async) {<ng-container></ng-container>}
@if (securityGroups$ | async) {<ng-container></ng-container>}

<fast-window [layerLevel]="2" [title]="'User Editor'" [width]="800" [height]="350" [minWidth]="600" [minHeight]="200"
  (close)="closeClicked()">
  @if (detail$) {
  <form [formGroup]="detailForm" class="flex flex-grow flex-col overflow-auto">
    @if (detailLoading$ | async) { <fast-spinner />}
    <div class="flex flex-row">
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <div class="flex flex-row">
          <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 flex-col">
            <fast-label>Username</fast-label>
            <fast-textbox class="inputFocusTarget" formControlName="userName" />
          </div>
          <div class="flex flex-grow-0 flex-col">
            <fast-label>Locked Out</fast-label>
            <fast-toggle class="w-15" formControlName="isLockedOut" onLabel="yes" offLabel="no"></fast-toggle>
          </div>
        </div>
      </div>
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-4.5 ml-2 flex-col">
        <fast-label>Temp Password</fast-label>
        @if (this.detailForm.get('tempPass').value === null)
        {<fast-button class="self-start" type="basic-no-width" (click)="generatePassword()">
          <kendo-svg-icon [icon]="icons.passwordIcon"></kendo-svg-icon>Set Temporary Password
        </fast-button>}
        @if (this.detailForm.get('tempPass').value !== null) {<fast-textbox formControlName="tempPass" />}
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <fast-label>Display Name</fast-label>
        <fast-textbox formControlName="displayName" />
      </div>
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <fast-label>Legal Name</fast-label>
        <fast-textbox formControlName="legalName" />
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <fast-label>Title</fast-label>
        <fast-textbox formControlName="title" />
      </div>
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <fast-label>Email</fast-label>
        <fast-textbox formControlName="email" />
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
        <fast-label>Security Groups</fast-label>
        <fast-multiselect formControlName="groupIds" [data]="securityGroups$ | async" [textField]="'name'"
          [valueField]="'id'" [valuePrimitive]="true" (filterChange)="filterSecurityGroups$.next($event)"
          [filterable]="true"></fast-multiselect>
      </div>
    </div>
  </form>
  }

  <fast-hr />
  <div class="flex flex-row flex-grow-0 pt-3">
    <div class="flex flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2 flex-col">
      @if(detailForm.value.id !== 0) {
      <fast-button type="delete" tabindex="-1"
        [disabled]="(detailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission" (click)="delete()">
        <kendo-svg-icon [icon]="icons.trashIcon"></kendo-svg-icon>Delete
      </fast-button>
      }
    </div>
    <div class="flex flex-grow-0 items-stretch justify-end flex-col mt-0 mb-2 ml-2 px-2">
      <fast-button type="primary" tabindex="-1"
        [disabled]="(detailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission"
        (click)="save(util.SaveType.Normal, util.AfterCompletedAction.CloseDetail)">
        <kendo-svg-icon [icon]="icons.saveIcon"></kendo-svg-icon>Save
      </fast-button>
    </div>

    <div class="flex flex-grow-0 items-stretch justify-end flex-col mt-0 mr-2 mb-2 ">
      <fast-button type="basic" tabindex="-1" [disabled]="detailLoading$ | async" (click)="closeClicked()">
        <kendo-svg-icon [icon]="icons.cancelIcon"></kendo-svg-icon>Cancel
      </fast-button>
    </div>
  </div>
</fast-window>