<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'ROLES' | translate}}</span>
        <app-page-help-text [code]="'ROLES'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button class="btn btn-success btn-sm" [routerLink]="['/roles/manage']">
          <i-feather name="plus"></i-feather>
          {{ 'ADD_ROLE' | translate }}
        </button>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-large">
            <table class="w-100" mat-table [dataSource]=" roles">
              <!-- Action Column -->
              <ng-container matColumnDef="action">
                <th class="table-column-fix-188" mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}} </th>
                <td mat-cell *matCellDef="let role">
                  <button *hasClaim="'role_edit'" [routerLink]="['/roles/manage',role.id]"
                    class="btn btn-success btn-sm me-2" type="button">
                    <i-feather name="edit" class="small-icon"></i-feather>
                    <span class="d-none d-sm-inline"> {{'EDIT' | translate}} </span>
                  </button>
                  <button *hasClaim="'role_delete'" (click)="deleteRole(role)" class="btn btn-danger btn-sm"
                    type="button">
                    <i-feather name="trash" class="small-icon"></i-feather>
                    <span class="d-none d-sm-inline"> {{'DELETE' | translate}} </span>
                  </button>
                </td>
              </ng-container>
              <!-- Name Column -->
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> {{'NAME' | translate}} </th>
                <td mat-cell *matCellDef="let role"> {{role.name}} </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="spinner-container" *ngIf="isLoadingResults">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
