{% if include.form %}
  {%- assign name = include.field[0] | append: ']' | prepend: '[' | prepend: include.form -%}
  {%- assign id = include.field[1].id | default: name | replace: '[', '_' | remove: ']' -%}
{% else %}
  {%- assign name = include.field[0] -%}
  {%- assign id = include.field[1].id | default: name %}
{% endif %}

{%- assign label = include.field[1].label[site.locale] -%}
{%- assign help = include.field[1].help[site.locale] -%}
{%- assign error = include.field[1].error[site.locale] -%}
{%- assign autocomplete = include.field[1].autocomplete -%}

<div class="form-group" data-controller="state" data-state-group="{{ include.field[1].group }}">
  <label for="{{ id }}">
    {{ label }}
    {% if include.field[1].required %}*{% endif %}
  </label>

  <input data-target="state.id" type="hidden" name="{{ name }}" id="{{ id }}" value="" />

  <input
    data-target="state.name"
    {% if help %}
      aria-describedby="help-{{ id }}"
    {% endif %}
    {% if include.field[1].required %}
      required
    {% endif %}
    type="{{ include.field[1].type }}"
    {% if autocomplete %}
      autocomplete="{{ autocomplete }}"
    {% endif %}
    name="{{ include.form }}_ignore_{{ include.field[0] }}"
    id="{{ include.form }}_ignore_{{ include.field[0] }}"
    disabled
    list="list-{{ id }}"
    class="form-control" />

  {%- if error -%}
    <div class="invalid-feedback">{{ error }}</div>
  {%- endif -%}

  {%- if help -%}
    <small id="help-{{ id }}" class="form-text">
      {{ help }}
    </small>
  {%- endif -%}

  <datalist id="list-{{ id }}" data-target="state.list">
  </datalist>
</div>