div(v-if="sane")
//
// See https://www.npmjs.com/package/vue-split-panel
//
Split.c-triple-pane(:style="splitStyle", :gutterSize="gutterSize", @onDragEnd="onDragEnd", :class="[ { 'c-editing-layout': isEditing }, {'c-not-editing-layout': !isEditing}, {'c-has-left-pane': hasLeftSlot}, {'c-no-left-pane': !hasLeftSlot} ]", v-hotkey="keymap")
// Left pane
SplitArea.c-left-pane(v-if="hasLeftSlot", :size="leftSize")
slot(name="left-pane")
// Middle pane
SplitArea.c-middle-pane(:size="middleSize")
// Edit bar
.c-editbar(v-if="pageEditMode !== 'view'" @click.stop="switchMode(null)")
// left end of bar
.c-editbar-contentId {{crowdhoundAnchor}}
// right end of bar
.c-editbar-right
| {{ $content.store.state.saveMsg }}
//- .c-editbar-dump-button(zv-if="pageEditMode === 'layout'")
//- |
//- a(@click.stop="dump") dump
// middle of bar
.c-editbar-mode-label(v-if="pageEditMode==='edit' || pageEditMode==='layout' || pageEditMode==='debug'")
span(:class="pageEditMode==='edit' ? 'c-selected-mode-style': ''", @click.stop="switchMode('edit')") edit
| /
span(:class="pageEditMode==='debug' ? 'c-selected-mode-style': ''", @click.stop="switchMode('debug')") design
.c-editbar-mode-label(v-else)
| {{pageEditMode}} mode
// Actual content
.c-middle-pane-content
content-children(v-if="haveLayout", :element="$content.store.state.layout", :context="mycontext")
div(v-else)
slot(name="middle-pane")
slot
// Right pane
SplitArea.c-right-pane(zv-show="rightSize > 0", :style="rightPaneStyle", :size="rightSize", :minSize="rightSize > 0 ? 200 : 0")
slot(v-if="hasRightSlot", name="right-pane")
Split(v-else, :direction="'vertical'", :style="propertiesSplitStyle", :gutterSize="gutterSize")
// Properties Pane
SplitArea.c-properties-pane(:size="40", :minSize="300")
h1.title Properties
content-element-props(:level="0")
// Components pane
SplitArea.c-components-pane(:size="60", :minSize="150")
h1.title Toolbox
content-toolbox