@if ((query | async)?.loading == null) {
  <div>
    <nz-skeleton [nzActive]="true"></nz-skeleton>
  </div>
}
@if ((query | async)?.data) {
  <nz-page-header [nzGhost]="false" nzBackIcon
    nzTitle="{{'menu.drivers.header' | translate}}" nzSubtitle="{{'menu.drivers.subtitle' | translate}}">
    <nz-page-header-extra>
      <button nz-button nzType="primary" routerLink="new"><i nz-icon nzType="plus"></i>{{ 'profile.add' | translate
    }}</button>
  </nz-page-header-extra>
  <nz-page-header-content>
    @if ((query | async)?.data?.drivers; as drivers) {
      <nz-table #table nzShowSizeChanger [nzFrontPagination]="false"
        [nzData]="drivers.nodes" [nzTotal]="drivers.totalCount"
        (nzQueryParams)="tableService.onTableQueryParamsChange($event)" nzBordered>
        <thead>
          <tr>
            <th nzCustomFilter nzColumnKey="lastName" [nzSortFn]="true">
              {{ 'profile.name' | translate }}
              <nz-filter-trigger [nzActive]="(route.queryParams | async)?.filter?.includes('lastName|like|')"
                [nzDropdownMenu]="filtername">
                <i nz-icon nzType="search"></i>
              </nz-filter-trigger>
            </th>
            <th nzCustomFilter nzColumnKey="mobileNumber" [nzSortFn]="true">
              {{ 'profile.mobileNumber' | translate }}
              <nz-filter-trigger [nzActive]="(route.queryParams | async)?.filter?.includes('mobileNumber|like|')"
                [nzDropdownMenu]="filtermobile">
                <i nz-icon nzType="search"></i>
              </nz-filter-trigger>
            </th>
            <th class="hidden md:table-cell" [nzFilters]="statuses" [nzFilterFn]="true" nzColumnKey="status">
            {{'profile.status' | translate}}</th>
          </tr>
        </thead>
        <tbody>
          @for (data of table.data; track data) {
            <tr [routerLink]="'view/' + data.id" class="group cursor-pointer">
              <td>
                <div>
                  <div class="table-first-line">
                    {{ data.firstName }} {{ data.lastName }}
                  </div>
                  <div class="table-second-line">
                    Registered on {{ data.registrationTimestamp | timeago }}
                  </div>
                </div>
              </td>
              <td><a [href]="'tel:+' + data.mobileNumber">{{ data.mobileNumber | phone }}</a></td>
              <td class="hidden md:table-cell"><nz-tag [nzColor]="tagColor.driver(data.status)"
                [nzBordered]="false">{{('enum.driver.status.' +
              toCamelCase(data.status)) | translate}}</nz-tag></td>
            </tr>
          }
        </tbody>
      </nz-table>
    }
    <nz-dropdown-menu #filtername="nzDropdownMenu">
      <div class="ant-table-filter-dropdown">
        <div class="search-box">
          <input nz-input #lastNameInput placeholder="{{ 'profile.lastName' | translate }}" />
          <button nz-button nzSize="small" nzType="primary"
            (click)="tableService.filterText('lastName', lastNameInput.value)" class="search-button">
            {{ 'profile.search' | translate }}
          </button>
          <button nz-button nzSize="small" (click)="tableService.resetFilter('lastName', lastNameInput)">{{
          'profile.reset' | translate }}</button>
        </div>
      </div>
    </nz-dropdown-menu>
    <nz-dropdown-menu #filtermobile="nzDropdownMenu">
      <div class="ant-table-filter-dropdown">
        <div class="search-box">
          <input #mobileNumberInput nz-input placeholder="Search Mobile Number">
          <button nz-button nzSize="small" nzType="primary" class="search-button"
            (click)="tableService.filterText('mobileNumber', mobileNumberInput.value)">
            {{ 'profile.search' | translate }}
          </button>
          <button nz-button nzSize="small" (click)="tableService.resetFilter('mobileNumber', mobileNumberInput)">{{
          'profile.reset' | translate }}</button>
        </div>
      </div>
    </nz-dropdown-menu>
  </nz-page-header-content>
</nz-page-header>
}