<uikit-field [label]="label" [name]="name" [control]="control">
  <div class="grid grid-cols-2 items-center gap-4">
    <p-autoComplete
      [formControl]="hoursCtrl"
      [suggestions]="filteredHours"
      (completeMethod)="filterHours($event)"
      [dropdown]="true"
      [forceSelection]="false"
      placeholder="ساعت"
      inputClass="w-full"
      type="number"
    ></p-autoComplete>

    <p-autoComplete
      [formControl]="minutesCtrl"
      [suggestions]="filteredMinutes"
      (completeMethod)="filterMinutes($event)"
      [dropdown]="true"
      [forceSelection]="false"
      placeholder="دقیقه"
      type="number"
      inputClass="w-full"
    ></p-autoComplete>
  </div>
  @if (hoursCtrl.value || minutesCtrl.value) {
    <span class="text-xs mt-1 text-muted-color">
      مدت زمان آزمون را {{ hoursCtrl.value || 0 }} ساعت و {{ minutesCtrl.value || 0 }} دقیقه انتخاب کردید.
    </span>
  }
</uikit-field>
