---
id:
  type: 'string'
name:
  type: 'string'
  default: ''
items: 
  type: 'array'
label:
  type: 'string'
label_class:
  type: 'string'
  default: ''
input_class:
  type: 'string'
  default: ''
placeholder:
  type: 'string'
  default: ''
---
{%- block 'forms/label.html', id: , class: label_class -%}
{{ label }}
{%- endblock -%}

{%- assign datalist_id = id | append: '-datalist' -%}
{% capture pattern %}
  pattern="{{ items | map: 'value' | default: items | join: '|' }}"
{% endcapture %}

{%
  render 'forms/input.html',
  id:,
  class: input_class,
  list: datalist_id,
  placeholder:,
  attributes: pattern
%}

<datalist
  id="{{- datalist_id | escape_once -}}"
>
  {% for option in items %}
    {% assign value = option.value | default: option %}
    {% assign item = option.item | default: value %}

    {% render 'forms/option.html', value: value, item: item %}
  {% endfor %}
</datalist>