div#edit-variable-page(data-role='page')
  div(data-theme=theme.headerSwatch, data-role='header')
    h3(data-bind="text: pageTitle()")
  div.ui-content.overthrow
    form#edit-variable-form.short-labels(autocomplete="off", autocapitalize="none", autocorrect="off", spellcheck="false")
      .ui-field-contain.has-variable-name-input
        label(for='edit-variable-name')=__('Name') + ': '
        input#edit-variable-name(placeholder="variable-name", autocomplete="off", autocapitalize="none", autocorrect="off", spellcheck="false", data-bind="textInput: variableName, jqmenabled: action() == 'add'")
      .ui-field-contain
        label(for='select-variable-type')=__('Type') + ': '
        select#select-variable-type(name='select-variable-type', data-bind="jqmselectvalue: variableType")
          option(value="value")=__('Value')
          option(value="expression")=__('Expression')
      .ui-field-contain
        label(data-bind="text: valueLabelText() + ': '")
        input#edit-varibale-value(autocomplete="off", autocapitalize="none", autocorrect="off", spellcheck="false", 
          data-bind="textInput: variableValue, attr: {placeholder: (variableType() == 'value' ? 'Number or string' : 'Numeric expr or string in quotes')}")
      .ui-field-contain
        label(for='select-variable-type')=__('Unit') + ': '
        input#edit-varibale-unit(autocomplete="off", autocapitalize="none", autocorrect="off", spellcheck="false", 
          data-bind="textInput: variableUnit, attr: {placeholder: 'Optional'}")
      .ui-field-contain.ui-grid-a
        div.ui-block-a
          a#edit-variable-cancel.ui-btn.ui-icon-back.ui-btn-icon-left(data-transition='slide', data-direction="reverse"
                             data-role="button", href='#variables-page')=__('Cancel')
        div.ui-block-b
          a#edit-variable-save.ui-btn.ui-icon-check.ui-btn-icon-left.ui-btn-b(data-role="button", data-bind="click: onSubmit")=__('Save')
      div#edit-variable-advanced(data-bind="visible: action() == 'update'")
          //- span=__('Advanced Options')+':'
          a#edit-variable-remove.delete-link.ui-btn.ui-icon-delete.ui-btn-icon-left(data-transition='slide', data-direction="reverse"
            data-bind="click: onRemove", data-role="button", href='#variables-page')=__('Delete this variable')