app.stache

<can-import from="~/src/mobile/" />
<can-import from="~/src/debug-alerts/"/>
<can-import from="~/src/debug-menu/"/>
<can-import from="~/src/slideout-content/"/>
<can-import from="~/src/debug-panel/" />
<can-import from="~/src/desktop/" />
<can-import from="~/src/modal/" />

<div style="display: none;">
  {{! canjs 'value' behavior only respects the 'listenTo' stream when we are actively bound to the property in stache or route }}
  {{! fixes several edge cases in author's preview where the wrong loop value answer/var is shown }}
  rvv {{appState.repeatVarValue}} olvv {{appState.outerLoopVarValue}}
</div>

{{#if(isMobile)}}
  <a2j-mobile-viewer
    lang:from="lang"
    logic:from="logic"
    appState:from="appState"
    pState:from="pState"
    mState:from="mState"
    interview:from="interview"
    traceMessage:to="traceMessage"
    class="bootstrap-styles" />
{{else}}
  {{#if(appState.showDebugPanel)}}
    <div class="slideout-content">
      <slideout-content
        appState:from="appState"
        interview:from="interview"
        traceMessage:from="appState.traceMessage" />
    </div>
  {{/if}}
  {{#if(appState.useMobileUI)}}
    <div class="prefers-minimal-interface {{#if(appState.showDebugPanel)}}with-slideout-content{{/if}}">
      <a2j-mobile-viewer
        lang:from="lang"
        logic:from="logic"
        appState:from="appState"
        pState:from="pState"
        mState:from="mState"
        interview:from="interview"
        traceMessage:to="traceMessage"
        class="bootstrap-styles" />
    </div>
    <debug-menu appState:from="appState" />
  {{else}}
    <div id="viewer-app" {{#if(appState.showDebugPanel)}}class="with-slideout-content"{{/if}}>
      {{ let remainingSteps = null, maxDisplayedSteps = null }}
      <a2j-desktop-viewer
        remainingSteps:to="remainingSteps"
        maxDisplayedSteps:to="maxDisplayedSteps"
        showDebugPanel:from="appState.showDebugPanel"
        lang:from="lang"
        logic:from="logic"
        appState:from="appState"
        pState:from="pState"
        mState:from="mState"
        interview:from="interview"
        class="bootstrap-styles steps-left-{{remainingSteps}} steps-{{maxDisplayedSteps}}" />

      <debug-menu appState:from="appState" />
      {{#if(appState.viewerAlertMessages.length)}}
        <author-debug-alerts alertMessages:from="appState.viewerAlertMessages" />
      {{/if}}
    </div>
  {{/if}}
{{/if}}

<a2j-modal
  appState:from="appState"
  modalContent:from="appState.modalContent"
  mState:from="mState"
  logic:from="logic"
  interview:from="interview"
  class="bootstrap-styles" />