@if ((query | async)?.loading == null) {
  <div>
    <nz-skeleton [nzActive]="true"></nz-skeleton>
  </div>
}
@if ((query | async)?.data; as data) {
  <div class="lg:grid lg:grid-cols-4 lg:gap-2 mb-2">
    <div class="mt-2">
      <nz-card>
        <nz-statistic [nzValue]="data.taxiSupportRequestAggregate[0].count?.id ?? 0"
          [nzTitle]="'overview.complaints.title' | translate" [nzPrefix]="prefixTplComplaints"
          [nzSuffix]="'overview.complaints.suffix' | translate">
        </nz-statistic>
        <ng-template #prefixTplComplaints><i nz-icon nzType="customer-service"></i></ng-template>
      </nz-card>
    </div>
    <div class="mt-2">
      <nz-card>
        <nz-statistic [nzValue]="data.activeOrders[0].count?.id ?? 0"
          [nzTitle]="'overview.activeOrders.title' | translate" [nzPrefix]="prefixTplpaymentRequests"
          [nzSuffix]="'overview.activeOrders.suffix' | translate">
        </nz-statistic>
        <ng-template #prefixTplpaymentRequests><i nz-icon nzType="field-time"></i></ng-template>
      </nz-card>
    </div>
    <div class="mt-2">
      <nz-card>
        <nz-statistic [nzValue]="data.driverAggregate[0].count?.id ?? 0"
          [nzTitle]="'overview.pendingDrivers.title' | translate" [nzPrefix]="prefixTplPendingDrivers"
          [nzSuffix]="'overview.pendingDrivers.suffix' | translate">
        </nz-statistic>
        <ng-template #prefixTplPendingDrivers><i nz-icon nzType="car"></i></ng-template>
      </nz-card>
    </div>
    <div class="mt-2">
      <nz-card>
        <nz-statistic [nzValue]="data.bookedOrders[0].count?.id ?? 0"
          [nzTitle]="'overview.bookedOrders.title' | translate" [nzPrefix]="prefixTplAvailableDrivers"
          [nzSuffix]="'overview.bookedOrders.suffix' | translate">
        </nz-statistic>
        <ng-template #prefixTplAvailableDrivers><i nz-icon nzType="schedule"></i></ng-template>
      </nz-card>
    </div>
  </div>
}
<app-overview-drivers-map></app-overview-drivers-map>
<div class="lg:grid lg:grid-cols-2 lg:gap-2">
  <div class="mt-2">
    <nz-card [nzTitle]="'overview.chart.requestsTitle' | translate" [nzExtra]="requestsExtrasTmpl">
      <div [ngClass]="{ hidden : isChartRequestsEmpty }" nz-g2 [nzChartOptions]="{ height: 300 }"
      (nzChartInitialized)="onChartRequestsInit($event)"></div>
      @if (isChartRequestsEmpty) {
        <p class="w-full text-center py-16 text-gray-500">{{'chart.emptyState' | translate}}
        </p>
      }
    </nz-card>
    <ng-template #requestsExtrasTmpl>
      <nz-segmented [nzOptions]="chartTimeOptions" [(ngModel)]="requestMode"
      (ngModelChange)="refreshRequests()"></nz-segmented>
    </ng-template>
  </div>
  <div class="mt-2">
    <nz-card [nzTitle]="'overview.chart.revenue' | translate" [nzExtra]="incomeExtrasTmpl">
      <div [ngClass]="{ hidden : isChartIncomeEmpty }" nz-g2 [nzChartOptions]="{ height: 300 }"
      (nzChartInitialized)="onChartIncomeInit($event)"></div>
      @if (isChartIncomeEmpty) {
        <p class="w-full text-center py-16 text-gray-500">{{'chart.emptyState' | translate}}
        </p>
      }
    </nz-card>
    <ng-template #incomeExtrasTmpl>
      <nz-segmented [nzOptions]="chartTimeOptions" [(ngModel)]="incomeMode"
      (ngModelChange)="refreshIncome()"></nz-segmented>
    </ng-template>
  </div>
</div>
<div class="lg:grid lg:grid-cols-2 lg:gap-2">
  <div class="mt-2">
    <nz-card [nzTitle]="'overview.chart.newDriverRegisters' | translate" [nzExtra]="driverRegistersTempl">
      <div [ngClass]="{ hidden : isChartDriverRegistrationsEmpty }" nz-g2 [nzChartOptions]="{ height: 300 }"
      (nzChartInitialized)="onChartDriverRegistrationsInit($event)"></div>
      @if (isChartDriverRegistrationsEmpty) {
        <p class="w-full text-center py-16 text-gray-500">{{'chart.emptyState' |
        translate}}</p>
      }
    </nz-card>
    <ng-template #driverRegistersTempl>
      <nz-segmented [nzOptions]="chartTimeOptions" [(ngModel)]="driverRegistrationsMode"
      (ngModelChange)="refreshDriverRegistrations()"></nz-segmented>
    </ng-template>
  </div>
  <div class="mt-2">
    <nz-card [nzTitle]="'overview.chart.newRiderRegisters' | translate" [nzExtra]="riderRegistersTempl">
      <div [ngClass]="{ hidden : isChartRiderRegistrationsEmpty }" nz-g2 [nzChartOptions]="{ height: 300 }"
      (nzChartInitialized)="onChartRiderRegistrationsInit($event)"></div>
      @if (isChartRiderRegistrationsEmpty) {
        <p class="w-full text-center py-16 text-gray-500">{{'chart.emptyState' |
        translate}}</p>
      }
    </nz-card>
    <ng-template #riderRegistersTempl>
      <nz-segmented [nzOptions]="chartTimeOptions" [(ngModel)]="riderRegistrationsMode"
      (ngModelChange)="refreshRiderRegistrations()"></nz-segmented>
    </ng-template>
  </div>
</div>