@if (type() === 'edit') {
<div>
  <app-language-redirection [path]="'/tax'" [id]="id!" />
</div>
}
<form class="theme-form theme-form-2 mega-form" [formGroup]="form" (ngSubmit)="submit()">
  <div class="row">
    <div class="col-10">
      <app-form-fields [label]="'name' | translate" [for]="'name'" [required]="true">
        <input
          class="form-control"
          type="text"
          placeholder="{{'enter_text_name' | translate}}"
          name="name"
          formControlName="name"
        />
        @if (form.controls['name'].touched && form.controls['name'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'name_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'rate'" [for]="'rate'" [required]="true">
        <div class="input-group">
          <input
            class="form-control"
            type="number"
            min="0"
            max="100"
            oninput="if (value > 100) value = 100; if (value < 0) value = 0;"
            placeholder="{{ 'enter_rate' | translate }}"
            name="rate"
            formControlName="rate"
          />
          <span class="input-group-text">%</span>
        </div>
        @if (form.controls['rate'].touched && form.controls['rate'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'rate_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'status'" [for]="'status'" [required]="false">
        <div class="form-check form-switch ps-0">
          <label class="switch">
            <input type="checkbox" id="status" formControlName="status" />
            <span class="switch-state"></span>
          </label>
        </div>
      </app-form-fields>
    </div>
  </div>
  <app-button [id]="'tax_btn'"
    >{{ (type() === 'create' ? 'save_tax' : 'update_tax') | translate }}</app-button
  >
</form>