@if ((query | async)?.data; as data) {
<form nz-form [formGroup]="form" nzLayout="vertical" (ngSubmit)="onSubmit()">
  <input formControlName="id" type="hidden" hidden>
  <input formControlName="mediaId" type="hidden" hidden>
  <input formControlName="enabledServices" type="hidden" hidden>
  <div class="lg:grid lg:grid-cols-4 lg:gap-2">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="firstName">{{'profile.firstName' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input required formControlName="firstName" id="firstName">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzFor="lastName">{{'profile.lastName' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input required formControlName="lastName" id="lastName">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="gender">{{'profile.gender' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="gender" id="gender">
          @for (g of genders; track g) {
          <nz-option [nzLabel]="(('enum.gender.' + camelCase(g)) | translate)" [nzValue]="g">
          </nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzFor="mobileNumber">{{'profile.mobileNumber' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-input-number required formControlName="mobileNumber" id="mobileNumber"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="email">{{'profile.email' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="email" id="email">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="fleet">{{'profile.fleet' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-select id="fleet" formControlName="fleetId">
          <nz-option [nzValue]="null" nzLabel=""></nz-option>
          @for (fleet of data.fleets.nodes; track fleet) {
          <nz-option [nzValue]="fleet.id" [nzLabel]="fleet.name"></nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="carId">{{'profile.carModel' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-select id="carId" formControlName="carId">
          @for (car of data.carModels.nodes; track car) {
          <nz-option [nzValue]="car.id" [nzLabel]="car.name"></nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="carColorId">{{ 'profile.carColor' | translate }}</nz-form-label>
      <nz-form-control>
        <nz-select id="carColorId" formControlName="carColorId">
          @for (carColor of data.carColors.nodes; track carColor) {
          <nz-option [nzValue]="carColor.id" [nzLabel]="carColor.name"></nz-option>
          }
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="carProductionYear">{{ 'profile.carProductionYear' | translate }}</nz-form-label>
      <nz-form-control>
        <nz-input-number formControlName="carProductionYear" id="carProductionYear"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="carPlate">{{ 'profile.carPlateNumber' | translate }}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="carPlate" id="carPlate">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="accountNumber">{{'profile.accountNumber' | translate }}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="accountNumber" id="accountNumber">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="bankName">{{'profile.bankName' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="bankName" id="bankName">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="bankRoutingNumber">{{'profile.bankRoutingNumber' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="bankRoutingNumber" id="bankRoutingNumber">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="bankSwift">{{'profile.bankSwift' | translate}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="bankSwift" id="bankSwift">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzFor="address">{{'profile.address' | translate }}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="address" id="address">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item class="lg:col-span-4">
      <nz-form-label nzRequired>
        {{ 'profile.services' | translate }}
      </nz-form-label>
      <nz-form-control>
        @for (service of data.services; track service) {
        <nz-tag nzMode="checkable" [nzBordered]="false"
          [nzChecked]="form.value.enabledServices.indexOf(service.id) > -1"
          (nzCheckedChange)="handleServiceCheckChange($event, service)">
          {{ service.name }}
        </nz-tag>
        }
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>{{'profile.avatarImage' | translate}}</nz-form-label>
      <nz-form-control>
        <nz-upload [nzAction]="root + 'upload'" [nzHeaders]="{Authorization: 'Bearer ' + jwt}"
          (nzChange)="handleUploadChange($event)" [nzBeforeUpload]="beforeUpload" nzListType="picture-card"
          [nzShowUploadList]="false">
          @if (!avatarUrl) {
          <i class="upload-icon" nz-icon [nzType]="loadingUpload ? 'loading' : 'plus'"></i>
          <div class="ant-upload-text">{{ 'profile.upload' | translate }}</div>
          }
          @if (avatarUrl) {
          <img [src]="avatarUrl" style="width: 100%" />
          }
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
  </div>
  <!-- <formly-form [form]="form" [fields]="fields" [model]="model">
  </formly-form>
  <h3>{{ 'profile.services' | translate }}</h3>
  <nz-transfer [nzTitles]="['All', 'Enabled']" [nzDataSource]="services">
  </nz-transfer>
  <br>
    <br>
      <h3>{{ 'profile.photo' | translate }}</h3>
      <nz-upload [nzAction]="root + 'operator/upload'" [nzHeaders]="{type: 'driver image'}" (nzChange)="uploaded($event)"
        nzListType="picture-card" [(nzFileList)]="fileList" [nzShowButton]="fileList.length < 1"
        [nzShowUploadList]="showUploadList">
        <i nz-icon nzType="plus"></i>
        <div class="ant-upload-text">{{ 'profile.upload' | translate }}</div>
      </nz-upload>
      <br> -->
  <button nz-button nzType="primary" [disabled]="!form.valid">{{ 'profile.save' | translate }}</button>
</form>
}