<tal:block i18n:domain="nive">
<ul>
  <li>
    <label for="${field.oid}">${subject}</label>
    <input type="text" name="${field.name}" value="${cstruct}"
           tal:attributes="size field.widget.size"
           class="${field.widget.css_class} ${'is-invalid' if field.error else ''}"
           id="${field.oid}">
  </li>

  <li>
    <label for="${field.oid}-confirm">${confirm_subject}</label>
    <input type="text" name="${field.name}-confirm" value="${confirm}"
           tal:attributes="size field.widget.size"
           class="${field.widget.css_class} ${'is-invalid' if field.error else ''}"
           id="${field.oid}-confirm">
  </li>
</ul>
<script tal:condition="field.widget.mask" type="text/javascript">
  reform.addCallback(
    "${field.oid}",
    function (oid) {
      $("#" + oid).mask("${field.widget.mask}", 
                        {placeholder:"${field.widget.mask_placeholder}"});
      $("#" + oid + "-confirm").mask("${field.widget.mask}", 
                                     {placeholder:"${field.widget.mask_placeholder}"});
    }
  );
</script>
</tal:block>