{# The field controls, shared by the form dialog and the form page. #}
{% for field in fields %}
{% set flagged %}{% if field.error %}aria-invalid="true" aria-describedby="e-{{ field.name }}"{% endif %}{% endset %}
<div class="field{% if field.error %} field--invalid{% endif %}">
  <label class="label" for="f-{{ field.name }}">
    {{ field.name }}{% if field.required %} <span class="req" aria-hidden="true">*</span>{% endif %}
  </label>
  {% if field.kind in ("textarea", "json") %}
  {# JSON arrives pretty-printed, so it needs the room to stay readable. #}
  <textarea id="f-{{ field.name }}" name="{{ field.name }}" rows="{{ 10 if field.kind == 'json' else 3 }}" {{ flagged }}
            {% if field.required %}required{% endif %}>{{ field.value }}</textarea>
  {% elif field.kind == "checkbox" %}
  <input id="f-{{ field.name }}" name="{{ field.name }}" type="checkbox" value="true"
         {% if field.checked %}checked{% endif %} {{ flagged }}>
  {% elif field.kind == "tristate" %}
  {# A nullable boolean: the empty option is the null a checkbox cannot send. #}
  <select id="f-{{ field.name }}" name="{{ field.name }}" {{ flagged }}>
    <option value="" {% if field.value == "" %}selected{% endif %}>—</option>
    <option value="true" {% if field.value == "true" %}selected{% endif %}>true</option>
    <option value="false" {% if field.value == "false" %}selected{% endif %}>false</option>
  </select>
  {% elif field.kind == "relation" %}
  {# A list of records rather than a key to memorise. #}
  <select id="f-{{ field.name }}" name="{{ field.name }}" {{ flagged }}
          {% if field.required %}required{% endif %}>
    {% if not field.required %}<option value="">—</option>{% endif %}
    {% for value, label in field.options %}
    <option value="{{ value }}" {% if value == field.value %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  {% elif field.kind == "select" %}
  <select id="f-{{ field.name }}" name="{{ field.name }}" {{ flagged }}
          {% if field.required %}required{% endif %}>
    {% if not field.required %}<option value="">—</option>{% endif %}
    {% for choice in field.choices %}
    <option value="{{ choice }}" {% if choice == field.value %}selected{% endif %}>{{ choice }}</option>
    {% endfor %}
  </select>
  {% else %}
  {% set control_type = {"integer": "number", "number": "number", "datetime": "datetime-local", "date": "date"}.get(field.kind, "text") %}
  <input id="f-{{ field.name }}" name="{{ field.name }}" type="{{ control_type }}"
         {% if field.kind == "number" %}step="any"{% endif %}
         value="{{ field.value }}" {{ flagged }}
         {% if field.required %}required{% endif %}>
  {% endif %}
  {% if field.error %}
  {# Tied to the control by aria-describedby above, so it is announced, not merely seen. #}
  <span class="field-error" id="e-{{ field.name }}">{{ field.error }}</span>
  {% endif %}
</div>
{% endfor %}