@if ((query | async)?.data?.orderUpdated == null) {
  <nz-result nzStatus="info"
    nzTitle="Looking For suitable driver. Please wait...">
    <div nz-result-extra>
      <button nz-button [routerLink]="'/requests/view/' + orderId" nzType="primary">View Request Details</button>
      <button nz-button (click)="cancelRequest()" nzType="primary" nzDanger>Cancel Request</button>
    </div>
  </nz-result>
}

@if ((query | async)?.data?.orderUpdated; as order) {
  <div>
    @if (order.status == 'DriverAccepted') {
      <nz-result nzStatus="success"
        nzTitle="{{order.driver?.firstName}} {{order.driver?.lastName}} ({{order.driver?.mobileNumber}}) has accepted the request. Go to the trip page for more information.">
        <div nz-result-extra>
          <button nz-button [routerLink]="'/requests/view/' + order.id" nzType="primary">View Request Details</button>
        </div>
      </nz-result>
    }
    @if (order.status != 'DriverAccepted') {
      <nz-result nzStatus="info"
        nzTitle="Trip status is updated to {{order.status}}.">
        <div nz-result-extra>
          <button nz-button [routerLink]="'/requests/view/' + order.id" nzType="primary">View Request Details</button>
        </div>
      </nz-result>
    }
  </div>
}