<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">{{'PAGES' | translate}}</span>
        <app-page-help-text [code]="'PAGES'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button *hasClaim="'page_add'" class="btn btn-success btn-sm" (click)="managePage()">
          <i-feather name="plus"></i-feather>
          {{'ADD_PAGE' | translate}}
        </button>
      </div>
    </div>
<div class="loading-shade" *ngIf="loading()">
  <mat-spinner></mat-spinner>
</div>
<div class="card">
  <div class="body">
    <div class="table-responsive">
      <div class="grid-height-large">
      <table mat-table [dataSource]="pageStore.sortedFilteredPages()" matSort matSortDisableClear matSortActive="name"
        class="table">
        <!-- Action Column -->
        <ng-container matColumnDef="action">
          <th class="table-light" style="width:30%" mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}} </th>
          <td style="width:30%" mat-cell *matCellDef="let element">
            <button *hasClaim="'page_edit'" (click)="managePage(element)" 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="'page_delete'" (click)="deletePage(element)" 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 class="table-light" mat-header-cell mat-sort-header *matHeaderCellDef> {{'KEY' | translate}} </th>
          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>
        <ng-container matColumnDef="url">
          <th class="table-light" mat-header-cell mat-sort-header *matHeaderCellDef> {{'PAGE_URL_DIALOG' | translate}}
          </th>
          <td mat-cell *matCellDef="let element"> {{element.url}} </td>
        </ng-container>

        <ng-container matColumnDef="action-search">
          <th class="table-light" mat-header-cell *matHeaderCellDef> </th>
        </ng-container>
        <ng-container matColumnDef="name-search">
          <th class="table-light" mat-header-cell *matHeaderCellDef>
            <input placeholder="{{'NAME' | translate}}" type="text" class="form-control w-90"
              [formControl]="nameFilterCtl">
          </th>
        </ng-container>
        <ng-container matColumnDef="url-search">
          <th class="table-light" mat-header-cell *matHeaderCellDef>
            <input placeholder="Page Url Or Dialog" type="text" class="form-control w-90" [formControl]="urlFilterCtl">
          </th>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
        <tr mat-header-row *matHeaderRowDef="['action-search','name-search','url-search'];sticky: true">
        </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    </div>
  </div>
</div>
  </div>
</section>
