<div id="editor-container" onpageup="prevPage()" onpagedown="nextPage()">
    <div class="relative-content" ng->
        <div vertical-slide left="#left-side" right="#right-side"></div>
        <div id="left-side">
            <div class="relative-content" autofocus="toc.lessons[lessonId].Pages[curPage-1].Files.length==0">
                <div class="slide-content" ng-bind-html-unsafe="toc.lessons[lessonId].Pages[curPage-1].Content"></div>

                <div class="bar module-bar">
                    <a href="#" class="prev-page" ng-click="prevPageClick($event)">&lt;</a>
                    <span>{{curPage}}/{{toc.lessons[lessonId].Pages.length}}</span>
                    <a href="#" class="next-page" ng-click="nextPageClick($event)">&gt;</a>
                </div>
            </div>
        </div>

        <div id="right-side" class="relative-content">
            <div id="explorer" ng-class="{hidden: toc.lessons[lessonId].Pages[curPage-1].Files.length==0}">
                <a class="menu-button" ng-repeat="f in toc.lessons[lessonId].Pages[curPage-1].Files" ng-click="openFile($index)" ng-class="{active: $index==curFile}">{{f.Name}}</a>
                <a syntax-checkbox ng-class="{active: editor.syntax}" class="menu-button syntax-checkbox">Syntax</a>
                <a imports-checkbox ng-class="{active: editor.imports}" class="menu-button imports-checkbox">Imports</a>
            </div>

            <div class="relative-content" ng-class="{hidden: toc.lessons[lessonId].Pages[curPage-1].Files.length==0}">

                <div id="top-part">
                    <div class="relative-content">
                        <div id="file-editor">
                            <textarea ui-codemirror ng-model="toc.lessons[lessonId].Pages[curPage-1].Files[curFile].Content"></textarea>
                        </div>
                    </div>
                </div>

                <div horizontal-slide top="#top-part" bottom="#bottom-part"></div>

                <div id="bottom-part">
                    <div class="relative-content">
                        <!--div id="file-menu" ng-controller="OutputCtrl"-->
                        <div id="file-menu">
                            <a ng-show="job == null" class="menu-button" id="run" ng-click="run()">Run</a>
                            <a ng-show="job != null" class="menu-button" id="kill" ng-click="kill()">Kill</a>
                            <a class="menu-button" id="format" ng-click="format()">Format</a>
                            <a class="menu-button" id="reset" ng-click="reset()">Reset</a>
                        </div>

                        <div class="output" ng-repeat="f in toc.lessons[lessonId].Pages[curPage-1].Files" ng-class="{active: $index==curFile}" ng-bind-html-unsafe="f.Output">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>