{% load static widget_tweaks fragments %}
{% whitespaceless %}
<script type="text/hyperscript">
  def setOption(key, val)
    for option in <select#{{field.id_for_label}} > option/>
      tell option
        if option@value is key set option@selected to 'true'
        else remove @selected from option end
      end
    end
    set #{{idx}}-txt's innerText to val
  end
</script>
{{ field|append_attr:"hidden" }}
<label id="{{idx}}-label" for="{{field.id_for_label}}">{{field.label}}</label>
<div id="{{idx}}" style="margin-top: 10px; position: relative;">
  <button type="button" aria-expanded="false" aria-haspopup="true">
    <span id="{{idx}}-txt">{{field.value.label|default:'None'}}</span>
  </button>
  <ul hidden role="listbox" aria-orientation="vertical" aria-labelledby="{{idx}}-label" tabindex="-1">
    {% for choice in field.field.choices %}{# lsiten for event: userHasChosen #}
      <li role="option" aria-selected="false" _="on userHasChosen setOption(@data-key, @data-value) end"
        data-key="{{choice.0|default:'None'}}" data-value="{{choice.1}}" tabindex="-1">
        <span>{{choice.1}}</span>
      </li>
    {% endfor  %}
  </ul>
</div>
{% endwhitespaceless %}
<script src="{% static 'chooseDown.js' %}"></script>
<script>chooseDown("{{idx}}")</script>{# chooseDown.js: emit userHasChosen event, unhide <ul role="listbox"> #}
