mixin fake-editable(name, field)
  div(ng-show="!clicked" ng-click="clicked = true")
    p.editable-click.editable-empty(ng-if="!#{field}")
      span Add #{name}
    p.editable-click(ng-if="#{field}")
      span Edit #{name}

mixin edit-code(name, field, type)
  div(ng-controller="EditCode")
    +fake-editable(name, field)
    a.btn.btn-sm.btn-success(ng-show="clicked" ng-click="clicked = false") Done
    if type === 'markdown'
      i(ng-show="clicked")
        span  Tip: you can include 
        a(href="https://help.github.com/articles/markdown-basics/" target="_blank") markdown
        span  
        span and basic HTML/Bootstrap elements
    div(ng-if="!clicked")
      if type === 'markdown'
        div(marked="#{field}")
      else
        .hide-code(ng-if="#{field}"
                   hljs source="#{field}" language="html")
    div(ng-if="clicked")
      div(ui-codemirror="{mode: '#{type}'}" ng-model="#{field}")

mixin edit-markdown(name, field)
  +edit-code(name, field, 'markdown')

mixin edit-schema(name, field)
  div(ng-controller="Schema")
    div(ng-show="!clicked" ng-click="edit(#{field})")
      p.editable-click.editable-empty(ng-if="!#{field}")
        span Add #{name}
      p.editable-click(ng-if="#{field}")
        span Edit #{name}
    a.btn.btn-sm.btn-success(ng-show="clicked" ng-click="#{field} = save() || #{field}") Done
    .alert.alert-sm.alert-danger(ng-if="parseError") {{ parseError }}
    div(ng-if="!clicked")
      .hide-code(
            ng-if="#{field}"
            hljs source="getString(#{field})")
    div(ng-if="clicked")
      div(ui-codemirror="{onLoad: codemirrorLoad, mode: 'javascript'}" ng-model="schemaString")