{{define "headerActions"}}
<a class="btn" href="{{.PostURL}}" title="Back to the page">PAGE</a>
<span class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-action="canvas-menu" title="Canvas actions">CANVAS▾</button>
    <div class="dropdown-menu align-right">
        <button type="button" class="btn btn-block" data-action="canvas-rename">Rename…</button>
        <button type="button" class="btn btn-block danger" data-action="canvas-delete">Delete canvas</button>
    </div>
</span>
<button class="btn" type="button" data-action="canvas-save" title="Save (Ctrl+S)">SAVE</button>
{{end}}

{{define "content"}}
<script>
    // Full-bleed view mode: the canvas surface owns the viewport instead of the
    // centred reading column. Set here rather than server-side for the same
    // reason the editor does it — one class, no extra template plumbing.
    document.body.classList.add('canvas-mode');
</script>
{{if .CanvasError}}
<div class="content">
    <h1>{{.ActiveCanvas}}</h1>
    <p class="canvas-broken">This canvas could not be opened — {{.CanvasError}}</p>
    <p>Fix it in the file itself, then reload.
       <a href="{{.ActiveCanvas}}.canvas?raw">view the raw file</a> ·
       <a href="{{.PostURL}}">back to the page</a></p>
</div>
{{else}}
<div class="canvas-app">
    <nav class="canvas-tabs row" aria-label="Page views">
        <a class="canvas-tab" href="{{.PostURL}}">PAGE</a>
        {{range .Canvases}}<a class="canvas-tab{{if .Active}} is-active{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
    </nav>
    <div class="canvas-toolbar row">
        <button type="button" class="btn btn-tool" data-action="undo" title="Undo (Ctrl+Z)" disabled>↶</button>
        <button type="button" class="btn btn-tool" data-action="redo" title="Redo (Ctrl+Shift+Z)" disabled>↷</button>
        <span class="toolbar-sep"></span>
        <button type="button" class="btn btn-tool" data-action="add-text" title="Add text node (T)">TEXT</button>
        <button type="button" class="btn btn-tool" data-action="add-file" title="Add file node (F)">FILE</button>
        <button type="button" class="btn btn-tool" data-action="add-link" title="Add link node (L)">LINK</button>
        <button type="button" class="btn btn-tool" data-action="add-group" title="Add group (G)">GROUP</button>
        <span class="toolbar-sep"></span>
        <span class="dropdown">
            <button type="button" class="btn btn-tool dropdown-toggle" data-action="color-menu" title="Colour of the selection">■▾</button>
            <div class="dropdown-menu canvas-color-menu">
                <button type="button" class="btn btn-tool btn-block" data-color="">Default</button>
                <button type="button" class="btn btn-tool btn-block" data-color="1"><span class="canvas-swatch" data-swatch="1"></span> Red</button>
                <button type="button" class="btn btn-tool btn-block" data-color="2"><span class="canvas-swatch" data-swatch="2"></span> Orange</button>
                <button type="button" class="btn btn-tool btn-block" data-color="3"><span class="canvas-swatch" data-swatch="3"></span> Yellow</button>
                <button type="button" class="btn btn-tool btn-block" data-color="4"><span class="canvas-swatch" data-swatch="4"></span> Green</button>
                <button type="button" class="btn btn-tool btn-block" data-color="5"><span class="canvas-swatch" data-swatch="5"></span> Cyan</button>
                <button type="button" class="btn btn-tool btn-block" data-color="6"><span class="canvas-swatch" data-swatch="6"></span> Purple</button>
            </div>
        </span>
        <button type="button" class="btn btn-tool" data-action="delete-selection" title="Delete selection (Del)">×</button>
        <span class="toolbar-sep"></span>
        <button type="button" class="btn btn-tool" data-action="zoom-out" title="Zoom out (−)">−</button>
        <button type="button" class="btn btn-tool" data-action="zoom-reset" title="Reset zoom to 100% (0)"><span data-canvas-zoom>100%</span></button>
        <button type="button" class="btn btn-tool" data-action="zoom-in" title="Zoom in (+)">+</button>
        <button type="button" class="btn btn-tool" data-action="fit" title="Fit to content (9)">FIT</button>
        <span class="canvas-status muted" data-canvas-status></span>
    </div>
    <div class="canvas-surface" id="canvas-surface" tabindex="0">
        <div class="canvas-world" id="canvas-world">
            <div class="canvas-layer" id="canvas-groups"></div>
            <svg class="canvas-edges" id="canvas-edges" xmlns="http://www.w3.org/2000/svg"></svg>
            <div class="canvas-layer" id="canvas-nodes"></div>
        </div>
        <div class="canvas-marquee" id="canvas-marquee" hidden></div>
        <div class="canvas-hint muted" data-canvas-hint hidden>
            Empty canvas — use the toolbar to add a node. Drag the background to pan, ctrl+wheel to zoom.
        </div>
    </div>
</div>
<script>window.CANVAS_DATA = {{.CanvasJSON}};</script>
<script src="/_/editor/vendor/codemirror.bundle.js?v={{editorBundleVersion}}"></script>
<script src="/_/editor/wikicomplete.js"></script>
<script src="/_/canvas/doc.js"></script>
<script src="/_/canvas/view.js"></script>
<script src="/_/canvas/select.js"></script>
<script src="/_/canvas/nodes.js"></script>
<script src="/_/canvas/edges.js"></script>
<script src="/_/canvas/interact.js"></script>
<script src="/_/canvas/edit.js"></script>
<script src="/_/canvas/save.js"></script>
<script src="/_/canvas/main.js"></script>
{{end}}
{{end}}