<div tal:define="
     name name|field.name;
     oid oid|field.oid;
     style style|field.widget.style;
     size size|field.widget.size;
     css_class css_class|field.widget.css_class;
     unicode unicode|str;
     optgroup_class optgroup_class|field.widget.optgroup_class;
     multiple multiple|field.widget.multiple;"
     tal:omit-tag="">

  <input type="hidden" name="__start__" value="${name}:sequence"
         tal:condition="multiple" />
  <select tal:attributes="
          name name;
          id oid;
          class string: form-control ${css_class or ''};
          multiple multiple;
          size size;
          style style;">
    <tal:loop tal:repeat="item values">
      <optgroup tal:condition="isinstance(item, optgroup_class)"
                tal:attributes="label item.label">
        <option tal:repeat="(value, description) item.options"
                tal:attributes="
                selected python:field.widget.get_select_value(cstruct, value);
                class css_class;
                label field.widget.long_label_generator and description;
                value value"
                tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
      </optgroup>
      <option tal:condition="not isinstance(item, optgroup_class)"
              tal:attributes="
              selected python:field.widget.get_select_value(cstruct, item[0]);
              class css_class;
              value item[0]">${item[1]}</option>
    </tal:loop>
  </select>
  <input type="hidden" name="__end__" value="${name}:sequence"
         tal:condition="multiple" />
  <script tal:condition="not multiple" type="text/javascript">
    deform.addCallback(
      '${oid}',
      function(oid) {
          $('#' + oid).selectmenu();
          $('#' + oid).on('selectmenuopen', function(event, ui) {
              show_all_options($(this));
          });
      }
    );
  </script>
</div>
