<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">  {{'APP_SETTINGS' | translate }}</span>
        <app-page-help-text [code]="'APP_SETTINGS'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button *hasClaim="'app_settings_add'"
        (click)="onManageAppSetting(null)" class="btn btn-success btn-sm me-2">
          <i class="fas fa-plus"></i>
          {{'ADD_APPSETTING' | translate }}
        </button>
      </div>
    </div>

<!-- <div class="row align-items-center justify-content-between">
    <div class="col-md-auto col-sm-auto">
      <div class="content-header">
        <h1>
          {{'APPSETTINGS' | translate }}
        </h1>
      </div>
    </div>
    <div class="col-md-auto col-sm-auto">
      <h4 class="widget-title">
        <button class="btn btn-success btn-sm m-right-10" *hasClaim="'app_settings_add'"
          (click)="onManageAppSetting(null)">
          <i class="fas fa-plus"></i>
          {{'ADD_APPSETTING' | translate }}
        </button>
      </h4>
    </div>
  </div> -->
  <div class="loading-shade" *ngIf="appSettingsStore.isLoading()">
    <mat-spinner *ngIf="appSettingsStore.isLoading()"></mat-spinner>
  </div>
  <div class="loading-shade" *ngIf="appSettingsStore.commonError()">
    {{appSettingsStore.commonError()}}
  </div>
  <div class="card">
    <div class="body">
      <div class="table-responsive">
        <div class="grid-height-large">
        <table mat-table [dataSource]="appSettingsStore.sortedFilteredAppSettings()" matSort matSortDisableClear
          matSortActive="name">
          <!-- Action Column -->
          <ng-container matColumnDef="action">
            <th style="width:30%" mat-header-cell *matHeaderCellDef>{{'ACTION' | translate }} </th>
            <td style="width:30%" mat-cell *matCellDef="let appSetting">
              <button *hasClaim="'app_settings_edit'" (click)="onManageAppSetting(appSetting)"
                class="btn btn-success btn-sm m-right-10" type="button">
                <i-feather name="edit" class="small-icon"></i-feather>
                <span class="d-none d-sm-inline"> {{'EDIT' | translate }}</span>
              </button>
            </td>
          </ng-container>
  
          <ng-container matColumnDef="name">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{'NAME' | translate }} </th>
            <td mat-cell *matCellDef="let appSetting"> {{appSetting.name}} </td>
          </ng-container>
  
          <!-- Key Column -->
          <ng-container matColumnDef="key">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{'KEY' | translate }} </th>
            <td mat-cell *matCellDef="let appSetting"> {{appSetting.key}} </td>
          </ng-container>
  
          <!-- Value Column -->
          <ng-container matColumnDef="value">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{'VALUE' | translate }} </th>
            <td mat-cell *matCellDef="let appSetting"> {{appSetting.value}} </td>
          </ng-container>
  
          <ng-container matColumnDef="action-search">
            <th mat-header-cell *matHeaderCellDef>
            </th>
          </ng-container>
          <ng-container matColumnDef="name-search">
            <th mat-header-cell *matHeaderCellDef>
              <input type="text" class="form-control w-90" [formControl]="nameFilterCtl">
            </th>
          </ng-container>
          <ng-container matColumnDef="key-search">
            <th mat-header-cell *matHeaderCellDef>
              <input type="text" class="form-control w-90" [formControl]="keyFilterCtl">
            </th>
          </ng-container>
          <ng-container matColumnDef="value-search">
            <th mat-header-cell *matHeaderCellDef>
              <input type="text" class="form-control w-90" [formControl]="valueFilterCtl">
            </th>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          <tr mat-header-row *matHeaderRowDef="['action-search','name-search','key-search','value-search'];sticky: true">
          </tr>
        </table>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
  