@if ((query | async)?.data?.order; as order) {
  <div>
    @if (order.conversation.length === 0) {
      <nz-empty class="empty-state"></nz-empty>
    }
    @for (chat of order.conversation; track chat) {
      <nz-comment
        [nzAuthor]="!chat.sentByDriver ? ((order.rider?.firstName ?? '-') + ' ' + (order.rider?.lastName ?? '-')) : ((order.driver?.firstName ?? '-') + ' ' + (order.driver?.lastName ?? ''))"
        [nzDatetime]="((chat.sentAt | date: 'short') ?? '')">
        <nz-avatar nz-comment-avatar [nzIcon]="!chat.sentByDriver ? 'user' : 'car'"
        [nzSrc]="!chat.sentByDriver ? (order.rider?.media?.address ?? '') : (order.driver?.media?.address ?? '')"></nz-avatar>
        <nz-comment-content>
          <p>
            {{chat.content}}
          </p>
        </nz-comment-content>
      </nz-comment>
    }
  </div>
}