{# Django template for Combobox #}
{% load components %}
{% with formGroup|default_if_none:True as wrap_group %}
{% if wrap_group %}
{% form_group error=error %}
{% label htmlFor=id required=required error=error %}{{ label }}{% endlabel %}

{% if hint %}
{% hint id=id|add:"-hint" %}{{ hint }}{% endhint %}
{% endif %}

{% if error %}
{% error_message id=id|add:"-error" %}{{ error }}{% enderror_message %}
{% endif %}

<div class="usa-combo-box usx-combo-box{% if error %} usx-combo-box--error{% endif %}{% if className %} {{ className }}{% endif %}"{% if placeholder %} data-placeholder="{{ placeholder }}"{% endif %}{% if defaultValue %} data-default-value="{{ defaultValue }}"{% endif %}>
  <select
    id="{{ id }}"
    class="usa-select usx-select"
    name="{{ name }}"
    {% if disabled %} disabled{% endif %}
    {% if required %} required{% endif %}
    {% if hint or error %} aria-describedby="{% if hint %}{{ id }}-hint{% endif %}{% if hint and error %} {% endif %}
    {% if error %}{{ id }}-error{% endif %}"{% endif %}
    {% if onSelect %} onchange="{{ onSelect }}"{% endif %}
  >
    {% for option in options %}
    <option value="{{ option.value }}">{{ option.label }}</option>
    {% endfor %}
  </select>
</div>
{% endform_group %}
{% else %}
{% label htmlFor=id required=required error=error %}{{ label }}{% endlabel %}

{% if hint %}
{% hint id=id|add:"-hint" %}{{ hint }}{% endhint %}
{% endif %}

{% if error %}
{% error_message id=id|add:"-error" %}{{ error }}{% enderror_message %}
{% endif %}

<div class="usa-combo-box usx-combo-box{% if error %} usx-combo-box--error{% endif %}{% if className %} {{ className }}{% endif %}"{% if placeholder %} data-placeholder="{{ placeholder }}"{% endif %}{% if defaultValue %} data-default-value="{{ defaultValue }}"{% endif %}>
  <select
    id="{{ id }}"
    class="usa-select usx-select"
    name="{{ name }}"
    {% if disabled %} disabled{% endif %}
    {% if required %} required{% endif %}
    {% if hint or error %} aria-describedby="{% if hint %}{{ id }}-hint{% endif %}{% if hint and error %} {% endif %}
    {% if error %}{{ id }}-error{% endif %}"{% endif %}
    {% if onSelect %} onchange="{{ onSelect }}"{% endif %}
  >
    {% for option in options %}
    <option value="{{ option.value }}">{{ option.label }}</option>
    {% endfor %}
  </select>
</div>
{% endif %}
{% endwith %}