@if (exportAction$ | async) {<ng-container></ng-container>}
@if (groupItems$ | async) {<ng-container></ng-container>}
@if (userItems$ | async) {<ng-container></ng-container>}

<global-bar></global-bar>

<fast-header [title]="title$ | async">
  <div class="flex flex-grow-0 items-stretch justify-start flex-row ml-2 mr-0">
    <fast-button [type]="'basic-no-width'" (click)="addGroupDetail()">
      <kendo-svg-icon class="mb-0.5 min-w-auto" [icon]="icons.plusIcon"></kendo-svg-icon>Add New Group
    </fast-button>
  </div>
  <div class="flex flex-grow items-stretch justify-start flex-row ml-2 mr-0">
    <fast-button [type]="'basic-no-width'" (click)="addUserDetail()">
      <kendo-svg-icon class="mb-0.5 min-w-auto" [icon]="icons.plusIcon"></kendo-svg-icon>Add New User
    </fast-button>
  </div>
  <div class="flex flex-grow-0 items-stretch justify-end flex-row mb-0.5 ml-0 mr-2.5 mt-0">
    <fast-button type="export" (click)="export()" [exporting]="exporting$ | async" tabindex="-1" />
  </div>
</fast-header>
<div class="grid-container flex flex-row flex-grow h-full overflow-hidden">
  <fast-grid class="group-grid w-min min-w-xs border-r-4 h-full border-r-base-blue-250 dark:border-r-base-blurple-250"
    [gridBinding]="groupItems$ | async" [loading]="gridLoading$ | async" [sortable]="true" [selectedKeys]="mySelection"
    [selectBy]="'id'" [filterable]="'menu, row'" (cellClick)="openGroupDetail($event.dataItem.id)"
    [selectable]="selectableSettings">
    <kendo-grid-column field="name" [width]="200" [title]="'Security Groups'"></kendo-grid-column>
  </fast-grid>
  <fast-grid class="user-grid min-w-0 border-none h-full" [loading]="gridLoading$ | async" [data]="userItems$ | async"
    [pageable]="true" [pageSize]="userState.take" [skip]="userState.skip" [sort]="userState.sort"
    [sortable]="{mode: 'multiple'}" [filterable]="'menu, row'" [filter]="userState.filter"
    (dataStateChange)="userDataStateChange($event)" [selectedKeys]="mySelection" [selectBy]="'Id'"
    (cellClick)="openUserDetail($event.dataItem.Id)" [selectable]="selectableSettings">
    <kendo-grid-column field="UserName" [width]="150" [title]="'Username'"></kendo-grid-column>
    <kendo-grid-column field="DisplayName" [width]="200" [title]="'Display Name'"></kendo-grid-column>
    <kendo-grid-column field="IsLockedOut" [width]="100" [title]="'Locked Out'"></kendo-grid-column>
    <kendo-grid-column field="GroupNames" [width]="200" [title]="'Groups'"></kendo-grid-column>
    <kendo-grid-column field="Email" [width]="250" [title]="'Email'"></kendo-grid-column>
    <kendo-grid-column field="LegalName" [width]="250" [title]="'Legal Name'"></kendo-grid-column>
    <kendo-grid-column field="Title" [width]="200" [title]="'Title'"></kendo-grid-column>
  </fast-grid>
</div>

@if (userDetailOpened$ | async) {
<app-user-detail #userDetail class="col-g overflow-hidden" [userId]="this.userDetailId"
  (closed)="closeUserDetail()"></app-user-detail>
}

@if (groupDetailOpened$ | async) {
<app-group-detail #groupDetail class="col-g overflow-hidden" [groupId]="this.groupDetailId"
  (closed)="closeGroupDetail()"></app-group-detail>
}