<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
    <div id="identity-roles-wrapper" class="card">
      <div class="card-body">
        <!-- <abp-extensible-table
          [data]="data.items"
          [recordsTotal]="data.totalCount"
          [list]="list"
        ></abp-extensible-table> -->
        <div class="flex justify-content-between align-items-center mb-3">
          <button pButton icon="pi pi-plus" label="Add Roles" class="p-button-success" (click)="add()"></button>
        </div>
        <p-table [value]="data.items" [paginator]="true" [rows]="5" responsiveLayout="scroll">
          <ng-template pTemplate="header">
            <tr>
              <th pSortableColumn="name">name <p-sortIcon field="name"></p-sortIcon></th>
     
              <th>Actions</th>
            </tr>
          </ng-template>
        
          <ng-template pTemplate="body" let-role>
            <tr>
              <td>{{ role.name }}</td>
            
       
              <td>
                <button pButton icon="pi pi-pencil" class="p-button-text p-button-primary" (click)="edit(role.id)"></button>
                <button pButton icon="pi pi-trash" class="p-button-text p-button-danger" (click)="delete(role.id,role.name)"></button>
                <button pButton icon="pi pi-external-link" class="p-button-text p-button-success" (click)="openPermissionsModal(role.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::NewRole') | abpLocalization }}</h3>
      </ng-template>
  
      <ng-template #abpBody>
        <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
          <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
        </form>
      </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: 'R' },
          providerKey: { value: providerKey },
          visible: { value: visiblePermissions, twoWay: true },
          hideBadges: { value: true }
        },
        outputs: { visibleChange: onVisiblePermissionChange },
        componentKey: permissionManagementKey
      };
      let init = initTemplate
    "
      (abpInit)="init(abpPermissionManagement)"
    >
    </abp-permission-management>
  </abp-page>
  