@if (role.type !== RoleTypeEnum.union) {
  <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.RoleOverview' | translate: {Default: 'Role Overview'} }} </h2>
  <div>{{ role.name }}</div>
  <div>
    <label>{{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}: </label>
    <z-toggle-group name="access" displayDensity="compact" ngmAppearance="outline" color="accent"
      [ngModel]="schemaGrantAccess$ | async"
      (change)="changeAccess($event)"
      (click)="$event.stopPropagation()">
      <z-toggle-group-item [value]="Access.all">{{ 'PAC.MODEL.AccessControl.Access_all' | translate: {Default: 'All'} }}</z-toggle-group-item>
      <z-toggle-group-item [value]="Access.all_dimensions">{{ 'PAC.MODEL.AccessControl.Access_all_dimensions' | translate: {Default: 'All Dimensions'} }}</z-toggle-group-item>
      <!-- <z-toggle-group-item [value]="Access.custom">{{ 'PAC.MODEL.AccessControl.Access_custom' | translate: {Default: 'Custom'} }}</z-toggle-group-item> -->
      <z-toggle-group-item [value]="Access.none">{{ 'PAC.MODEL.AccessControl.Access_none' | translate: {Default: 'None'} }}</z-toggle-group-item>
    </z-toggle-group>
  </div>
}

@if (role.type === RoleTypeEnum.union) {
  <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Default: 'Union Role'} }}</h2>
  <div>{{ role.name }}</div>
  <h3> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
  <div class="pac-cdk-drop__list pac-table-container flex-1 h-1/2 overflow-auto rounded-lg border pb-4"
    cdkDropList
    (cdkDropListDropped)="dropRole($event)">
    <table z-table style="min-width: 100%;" class="ngm-density__compact">
      <thead z-table-header>
        <tr z-table-row class="border-b bg-muted/30 hover:bg-muted/30">
          <th z-table-head zTableStickyStart [zTableStickyStart]="0" [zTableStickyZIndex]="5" class="w-12"></th>
          <th z-table-head>{{ 'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} }}</th>
          <th z-table-head>{{ 'PAC.KEY_WORDS.Type' | translate: {Default: 'Type'} }}</th>
          <th z-table-head>{{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }}</th>
        </tr>
      </thead>

      <tbody z-table-body>
        @for (element of (roleUsages$ | async) ?? []; track element?.name || $index) {
          <tr z-table-row cdkDrag>
            <td z-table-cell zTableStickyStart [zTableStickyStart]="0" [zTableStickyZIndex]="4" class="w-12">
              <z-icon cdkDragHandle zSize="sm" class="pac-model-role-usage__drag" zType="drag_indicator"></z-icon>
            </td>
            <td z-table-cell>
              <a href [routerLink]="['../../', element.key, 'overview']">{{ element.name}}</a>
            </td>
            <td z-table-cell>
              <z-radio-group [ngModel]="element.type" disabled class="ngm-radio-group__horizontal" displayDensity="compact">
                <z-radio >{{ 'PAC.MODEL.AccessControl.SingleRole' | translate: {Default: 'Single Role'} }}</z-radio>
                <z-radio [value]="RoleTypeEnum.union">
                  {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Default: 'Union Role'} }}
                </z-radio>
              </z-radio-group>
            </td>
            <td z-table-cell class="w-20">
              <button z-button zType="ghost" zSize="icon" zShape="circle" displayDensity="compact" ngmAppearance="danger" (click)="removeRoleUsage(element.name)">
                <z-icon zType="close"></z-icon>
              </button>
            </td>
          </tr>
        } @empty {
          <tr z-table-row>
            <td z-table-cell colspan="4" class="py-8 text-center">
              {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>
}

<h3> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Default: 'Users Manage'} }} </h3>
<div class="flex flex-col justify-start items-stretch">
  <div class="flex justify-between items-center">
    <pac-inline-search [formControl]="searchControl"/>

    <div ngmButtonGroup>
      <button z-button zType="default" displayDensity="cosy" (click)="onAddUser()">
        {{ 'PAC.MENU.AddUsers' | translate: {Default: 'Add Users'} }}
      </button>
    </div>
  </div>
  <div class="pac-table-container mt-4 flex-1 overflow-auto rounded-lg border pb-4">
    <table z-table class="ngm-density__compact w-full">
      <thead z-table-header>
        <tr z-table-row class="border-b bg-muted/30 hover:bg-muted/30">
          <th z-table-head>{{ 'PAC.KEY_WORDS.User' | translate: {Default: 'User'} }}</th>
          <th z-table-head>{{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }}</th>
        </tr>
      </thead>

      <tbody z-table-body>
        @for (element of (users$ | async) ?? []; track element.id) {
          <tr z-table-row>
            <td z-table-cell>
              <pac-user-profile-inline [user]="element"></pac-user-profile-inline>
            </td>
            <td z-table-cell class="w-20">
              <button z-button zType="ghost" zSize="icon" zShape="circle" displayDensity="cosy" ngmAppearance="danger" (click)="removeUser(element.id)">
                <div class="flex justify-center items-center">
                  <z-icon zType="close"></z-icon>
                </div>
              </button>
            </td>
          </tr>
        } @empty {
          <tr z-table-row>
            <td z-table-cell colspan="2" class="py-8 text-center">
              {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>

</div>