@if (formVisible()) {
  <div class="form-group">
    <form [formGroup]="form">
      <app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
      <app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
      <app-enum-select [control]="form.controls.payload.controls.karat" type="goldKarat" name="karat" />

      <app-amount-percentage-input
        [percentageControl]="form.controls.payload.controls.wages_percentage"
        [amountControl]="form.controls.payload.controls.wages_amount"
        [baseAmount]="unitWithQuantity()"
        [minAmount]="0"
        [maxAmount]="unitWithQuantity()"
        name="wages"
        label="اجرت"
      />
      <app-amount-percentage-input
        [percentageControl]="form.controls.payload.controls.commission_percentage"
        [amountControl]="form.controls.payload.controls.commission_amount"
        [baseAmount]="unitWithQuantity()"
        [minAmount]="0"
        [maxAmount]="unitWithQuantity()"
        name="commission"
        label="حق‌العمل"
      />
      <app-amount-percentage-input
        [percentageControl]="form.controls.payload.controls.profit_percentage"
        [amountControl]="form.controls.payload.controls.profit_amount"
        [baseAmount]="totalAmountBeforeProfit()"
        [minAmount]="0"
        [maxAmount]="totalAmountBeforeProfit()"
        name="profit"
        label="سود"
      />
    </form>

    <app-amount-percentage-input
      [percentageControl]="form.controls.discount_percentage"
      [amountControl]="form.controls.discount_amount"
      [baseAmount]="baseAmountForDiscountCalculation()"
      [minAmount]="0"
      [maxAmount]="baseAmountForDiscountCalculation()"
      name="discount"
      label="تخفیف"
    >
      <ng-template #labelSuffix>
        <p-selectButton
          [options]="discountTypeItems"
          [(ngModel)]="discountType"
          [allowEmpty]="false"
          optionLabel="label"
          optionValue="value"
          (onChange)="changeDiscountCalculation($event)"
        />
      </ng-template>
    </app-amount-percentage-input>

    <hr />
    <div class="flex flex-col gap-4 justify-center w-full">
      <pos-form-dialog-amount-card-template
        [totalAmount]="totalAmount()"
        [baseTotalAmount]="baseTotalAmount()"
        [discountAmount]="form.controls.discount_amount.value || 0"
        [taxAmount]="taxAmount()"
      />
      <button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
    </div>
  </div>
}