message: vue
  -- navigation buttons
diff: <template>
  - <div>
  + <div :class="css.root">
  <div v-if="hasTitle" :class="css.header"><h3>{{model.processedTitle}}</h3></div>
  - <survey-page :survey="model" :page="model.currentPage" :css="css" />
  + <template v-if="model.state === 'running'">
  + <div data-bind="css: $root.css.body">
  + <div data-bind="visible: showProgressBar =='top', template: { name: 'survey-progress', data: $data }"></div>
  + <survey-page id="sq-page" :survey="model" :page="model.currentPage" :css="css" />
  + <div style="margin-top:10px" data-bind="visible: showProgressBar =='bottom', template: { name: 'survey-progress', data: $data }"></div>
  + </div>
  + <div v-if="model.isNavigationButtonsShowing" :class="css.footer">
  + <input type="button" :value="model.pagePrevText" v-show="!model.isFirstPage" :class="css.cssNavigationPrev" @click="prevPage"/>
  + <input type="button" :value="model.pageNextText" v-show="!model.isLastPage" :class="css.cssNavigationNext" @click="nextPage"/>
  + <input type="button" :value="model.completeText" v-show="model.isLastPage" :class="css.cssNavigationComplete" @click="completeLastPage"/>
  + </div>
  + <template>
  + <div v-if="model.state === 'completed'" :html="model.processedCompletedHtml"></div>
  + <div v-if="model.state === 'loading'" :html="model.processedLoadingHtml"></div>
  + <div v-if="model.state === 'empty'" :class="css.body">{{model.emptySurveyText}}</div>
  </div>
  </template>
  get css () {
  return surveyCss.getCss();
  }
  + prevPage() {
  + this.model.prevPage();
  + }
  + nextPage() {
  + this.model.nextPage();
  + }
  + completeLastPage() {
  + this.model.completeLastPage();
  + }
  }
  Vue.component("survey", Survey)
  </script>
  \ No newline at end of file
  