<admin-page-header [title]="'Roles & Permissions'" ></admin-page-header>

<!--Role List-->
<div class="col-xl-12 col-lg-12 col-md-12 p-0">
  <div class="card ">
    <div class="card-header border-0 d-sm-max-flex">
      <h4 class="card-title">{{'Roles List' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Roles & Permission Create')) {
          <a routerLink="/admin/manage-roles/create-roles" class="btn btn-primary me-3">{{'Add Role and Permissions' | translate}}</a>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive role-table">
        <div class="table-options">
          <div class="custom-buttons">
          </div>
          <mat-form-field  class="pull-right">
            <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
          </mat-form-field>
        </div>
        <div>
          @if (isloader) {
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          }
          <table class="table table-bordered border-bottom text-nowrap w-100 dataTable " mat-table
            [dataSource]="dataSource" matSort>

            <!-- Sno Column -->
            <ng-container matColumnDef="id">
              <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Sl.No' | translate}} </th>
              <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 + (paginator.pageIndex * paginator.pageSize)}}
              </td>
            </ng-container>



            <!-- roles Column -->
            <ng-container matColumnDef="role">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'Roles'| translate}} </th>
              <td mat-cell *matCellDef="let row" class="">
                {{row?.name.slice(0, 40)}}
              </td>

            </ng-container>

            <!-- user Column -->
            <ng-container matColumnDef="employeescount">
              <th scope="col" mat-header-cell *matHeaderCellDef> {{'Employees Count'| translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                <span class="badge badge-primary">{{row?.users.length}}</span>
              </td>
            </ng-container>

            <!-- status Column -->
            <ng-container matColumnDef="permissionscount">
              <th scope="col" mat-header-cell *matHeaderCellDef> {{'Permissions Count'| translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                <span class="badge badge-success">{{row?.permissions.length}}</span>
              </td>
            </ng-container>

            <!-- actions Column -->
            <ng-container matColumnDef="actions">
              <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions'| translate}} </th>
              <td mat-cell *matCellDef="let row">
                <div>
                  @if (permission?.includes('Roles & Permission Edit')) {
                    @if (row.name != 'superadmin') {
                      <button aria-label="Edit" routerLink="/admin/manage-roles/edit-roles/{{row.id}}"
                        class="action-btns1" [ngbTooltip]="'Edit' | translate"><i class="feather feather-edit text-primary"></i></button>
                      } @else {
                        ~
                      }
                    }

                  </div>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

              <!-- Row shown when there is no matching data. -->
              <tr class="mat-row" *matNoDataRow>
                @if (!input.value.length) {
                  <td class="mat-cell text-center" colspan="12">
                    {{'No data Found'| translate}}
                  </td>
                } @else {
                  <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} " {{input.value}} " </td>
                }
              </tr>
            </table>

            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length" [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize" >
            </mat-paginator>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End Role List-->