<!--! -*- mode: html; -*- -->
<span tal:define="size size|field.widget.size;
                  css_class css_class|field.widget.css_class;
                  oid oid|field.oid;
                  style style|field.widget.style|None;
                  type_name type_name|field.widget.type_name;
                  field_name field_name|field.name;
                  use_buefy use_buefy|0;"
      tal:omit-tag="">

  <div tal:condition="not use_buefy" tal:omit-tag="">
    ${field.start_mapping()}
    <input type="${type_name}"
           name="time"
           value="${cstruct}"
           tal:attributes="size size;
                           class string: ${css_class or ''} form-control;
                           style style"
           id="${oid}"/>
    ${field.end_mapping()}
    <script type="text/javascript">
      deform.addCallback(
        '${oid}',
        function(oid) {
            $('#' + oid).timepicker(${options_json});
        }
      );
    </script>
  </div>

  <div tal:condition="use_buefy"
       tal:define="vmodel vmodel|'field_model_' + field_name;">
    ${field.start_mapping()}
    <tailbone-timepicker name="time"
                         id="${oid}"
                         v-model="${vmodel}">
    </tailbone-timepicker>
    ${field.end_mapping()}
  </div>

</span>
