{% load form_a11y %}{% comment %}
Reusable form field wrapper — renders label + widget + help + errors with
consistent typography and spacing.

Required:
  field        — a bound Django form field (e.g. form.title)

Optional:
  label        — override the label text (default: field.label)
  required     — truthy → show a red * after the label (default: field.field.required)
  hint         — override help text (default: field.help_text)
  optional_tag — truthy → show an "OPTIONAL" eyebrow on the right (default: false)
  suffix       — extra HTML after the widget, before hint/errors (rarely used)

Usage:
  {% include "components/form_field.html" with field=form.title %}
  {% include "components/form_field.html" with field=form.notes hint="Internal only." %}
  {% include "components/form_field.html" with field=form.title required=1 %}
{% endcomment %}
<div class="field">
  <div class="field-label-row">
    <label for="{{ field.id_for_label }}" class="field-label m-0">
      {{ label|default:field.label }}{% if required %}<span class="field-required">*</span>{% endif %}
    </label>
    {% if optional_tag %}<span class="field-optional">Optional</span>{% endif %}
  </div>
  {% render_field_a11y field %}
  {% if suffix %}{{ suffix }}{% endif %}
  {% if hint or field.help_text %}<p id="{{ field.id_for_label }}_hint" class="field-hint">{{ hint|default:field.help_text|safe }}</p>{% endif %}
  {% if field.errors %}<p id="{{ field.id_for_label }}_error" class="field-error" role="alert">{{ field.errors.0 }}</p>{% endif %}
</div>