<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;
     input_handler input_handler|'';"
     tal:omit-tag="">

  <div tal:define="vmodel vmodel|'field_model_' + name;">
    <input type="hidden" name="__start__" value="${name}:sequence"
           tal:condition="multiple" />
    <b-select tal:attributes="name name;
                              id oid;
                              placeholder '(please choose)';
                              class string: form-control ${css_class or ''};
                              :multiple str(multiple).lower();
                              native-size size;
                              style style;
                              v-model vmodel;
                              @input input_handler;
                              attributes|field.widget.attributes|{};">

      <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>

    </b-select>
    <input type="hidden" name="__end__" value="${name}:sequence"
           tal:condition="multiple" />
  </div>

</div>
