import { Component, booleanAttribute, input } from '@angular/core';

/** Molecule: form field = label + projected control + optional error/description,
    in the CIBG Huisstijl horizontal `form-group row` layout (label `col-md-4`,
    control `col-md-8`). The required asterisk comes from
    `.form-group.required>.col-form-label::after` — no separate "(verplicht)" text.
    Reused by the login form, the change-request form, and every wizard step. */
@Component({
  selector: 'app-form-field',
  template: `
    <div class="form-group row" [class.required]="required()">
      <label class="col-md-4 col-form-label" [id]="fieldId() + '-label'" [for]="fieldId()">{{
        label()
      }}</label>
      <div class="col-md-8 col-control">
        @if (description()) {
          <div class="form-text" [id]="fieldId() + '-desc'">{{ description() }}</div>
        }
        <ng-content />
        @if (error()) {
          <div [id]="fieldId() + '-error'" role="alert">
            <span class="errortext">{{ error() }}</span>
          </div>
        }
      </div>
    </div>
  `,
})
export class FormFieldComponent {
  label = input.required<string>();
  fieldId = input.required<string>();
  description = input<string>();
  error = input<string>();
  required = input(false, { transform: booleanAttribute });
}
