@if (
  (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name === 'modern'
) {
  <div>
    <sky-toolbar>
      <sky-toolbar-item>
        <button
          class="sky-btn sky-btn-primary"
          id="edit-btn"
          type="button"
          (click)="openModal()"
        >
          Edit
        </button>
      </sky-toolbar-item>
      <sky-toolbar-item>
        <sky-search
          [searchText]="searchText"
          [debounceTime]="250"
          (searchApply)="searchApplied($event)"
          (searchChange)="searchApplied($event)"
          (searchClear)="searchApplied($event)"
        />
      </sky-toolbar-item>
    </sky-toolbar>
    <sky-ag-grid-wrapper>
      <ag-grid-angular [gridOptions]="gridOptions" [rowData]="gridData" />
    </sky-ag-grid-wrapper>
  </div>
} @else {
  <div>
    <sky-toolbar>
      <sky-toolbar-item>
        <button
          class="sky-btn sky-btn-primary"
          id="edit-btn"
          type="button"
          (click)="openModal()"
        >
          Edit
        </button>
      </sky-toolbar-item>
      <sky-toolbar-item>
        <sky-search
          [searchText]="searchText"
          [debounceTime]="250"
          (searchApply)="searchApplied($event)"
          (searchChange)="searchApplied($event)"
          (searchClear)="searchApplied($event)"
        />
      </sky-toolbar-item>
    </sky-toolbar>
    <sky-ag-grid-wrapper>
      <ag-grid-angular [gridOptions]="gridOptions" [rowData]="gridData" />
    </sky-ag-grid-wrapper>
  </div>
}