<div class="modal-header">
  <h4 class="modal-title">
    {{ action === "create" ? "Tambah" : "Edit" }} Material
  </h4>
  <button
    type="button"
    class="btn-close"
    aria-label="Close"
    (click)="activeModal.dismiss('Cross click')"
  ></button>
</div>
<div class="modal-body">
  <form [formGroup]="form">
    <div class="mb-3">
      <label class="form-label">Nama Material</label>
      <input
        class="form-control"
        type="text"
        formControlName="name"
        [ngClass]="{ 'is-invalid': helpers.isInvalid(form, 'name') }"
      />
      <div
        *ngIf="helpers.hasError(form, 'name', 'required')"
        class="invalid-feedback"
      >
        Harus diisi
      </div>
      <div
        *ngIf="helpers.hasError(form, 'name', 'noWhiteSpace')"
        class="invalid-feedback"
      >
        Awalan dan akhiran tidak boleh ada spasi
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label">Jumlah</label>
      <input
        class="form-control"
        type="text"
        formControlName="qty"
        [ngClass]="{ 'is-invalid': helpers.isInvalid(form, 'qty') }"
      />
      <div
        *ngIf="helpers.hasError(form, 'qty', 'required')"
        class="invalid-feedback"
      >
        Harus diisi
      </div>
      <div
        *ngIf="helpers.hasError(form, 'qty', 'pattern')"
        class="invalid-feedback"
      >
        Jumlah tidak valid
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label">Satuan</label>
      <select class="form-select" formControlName="unit">
        <option [value]="'Sak'">Sak</option>
        <option [value]="'Pcs'">Pcs</option>
        <option [value]="'Kg'">Kg</option>
      </select>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button
    class="btn btn-outline-primary"
    type="button"
    (click)="activeModal.close('Cancel')"
  >
    Batal
  </button>
  <button
    class="btn btn-primary"
    type="button"
    [disabled]="form.invalid"
    (click)="onSubmit()"
  >
    Simpan
  </button>
</div>
