<!-- <div>
  <h3>Total Users: {{ data.totalCount }}</h3>
  <ul>
    <li *ngFor="let user of data.items">
      <strong>{{ user.userName }}</strong> ({{ user.email }})
    </li>
  </ul>
</div> -->

<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
    <div id="identity-roles-wrapper" class="card">
      <div class="card-body">
        <div id="data-tables-table-filter" class="data-tables-filter mb-3">
          <div class="flex justify-content-between align-items-center mb-3">
            <button pButton icon="pi pi-plus" label="Add User" class="p-button-success" (click)="add()"></button>
          </div>
          <div class="input-group">
            <input
              type="search"
              class="form-control"
              [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
              [(ngModel)]="list.filter"
              
            />
          </div>
        </div>

<!--   
        <abp-extensible-table
        
          [data]="data.items"
          [recordsTotal]="data.totalCount"
          [list]="list"
          
        ></abp-extensible-table> -->
        <p-table [value]="data.items" [paginator]="true" [rows]="5" responsiveLayout="scroll">
          <ng-template pTemplate="header">
            <tr>
              <th pSortableColumn="userName">Username <p-sortIcon field="userName"></p-sortIcon></th>
              <th pSortableColumn="name">First Name <p-sortIcon field="name"></p-sortIcon></th>
              <th pSortableColumn="surname">Last Name <p-sortIcon field="surname"></p-sortIcon></th>
              <th pSortableColumn="email">Email <p-sortIcon field="email"></p-sortIcon></th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </ng-template>
        
          <ng-template pTemplate="body" let-user>
            <tr>
              <td>{{ user.userName }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.surname }}</td>
              <td>{{ user.email }}</td>
              <td>
                <p-tag [value]="user.isActive ? 'Active' : 'Inactive'" [severity]="user.isActive ? 'success' : 'danger'"></p-tag>
              </td>
              <td>
                <button pButton icon="pi pi-pencil" class="p-button-text p-button-primary" (click)="edit(user.id)"></button>
                <button pButton icon="pi pi-trash" class="p-button-text p-button-danger" (click)="delete(user.id,user.userName)"></button>
                <button pButton icon="pi pi-external-link" class="p-button-text p-button-success" (click)="openPermissionsModal(user.name,user.name)"></button>

              </td>
            </tr>
          </ng-template>
        </p-table>
        
        
      </div>
    </div>
  
    <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
      <ng-template #abpHeader>
        <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
      </ng-template>
  
      <ng-template #abpBody>
        @if (form) {
          <form [formGroup]="form" (ngSubmit)="save()">
            <ul ngbNav #nav="ngbNav" class="nav-tabs">
              <li ngbNavItem>
                <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
                <ng-template ngbNavContent>
                  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
                </ng-template>
              </li>
  
              <li ngbNavItem>
                <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
                <ng-template ngbNavContent>
                  @for (roleGroup of roleGroups; track $index; let i = $index) {
                    <div class="form-check mb-2">
                      <abp-checkbox
                        *abpReplaceableTemplate="{
                          inputs: {
                            checkboxId: 'roles-' + i,
                            label: roles[i].name,
                            formControl: roleGroup.controls[roles[i].name]
                          },
                          componentKey: inputKey
                        }"
                        [checkboxId]="'roles-' + i"
                        [formControl]="roleGroup.controls[roles[i].name]"
                        [label]="roles[i].name"
                      >
                      </abp-checkbox>
                    </div>
                  }
                </ng-template>
              </li>
            </ul>
            <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
          </form>
        } @else {
          <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
        }
      </ng-template>
  
      <ng-template #abpFooter>
        <button type="button" class="btn btn-outline-primary" abpClose>
          {{ 'AbpIdentity::Cancel' | abpLocalization }}
        </button>
        <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
          'AbpIdentity::Save' | abpLocalization
        }}</abp-button>
      </ng-template>
    </abp-modal>
  
    <abp-permission-management
      #abpPermissionManagement="abpPermissionManagement"
      *abpReplaceableTemplate="
        {
          inputs: {
            providerName: { value: 'U' },
            providerKey: { value: providerKey },
            visible: { value: visiblePermissions, twoWay: true }
          },
          outputs: { visibleChange: onVisiblePermissionChange },
          componentKey: permissionManagementKey
        };
        let init = initTemplate
      "
      [entityDisplayName]="entityDisplayName"
      (abpInit)="init(abpPermissionManagement)"
    >
    </abp-permission-management>
  </abp-page>
  