<html>
    <head>
        <link href="static/main.css" rel="stylesheet" type="text/css" />
        <link href="static/nengo.css" rel="stylesheet" type="text/css" />
        <link href="static/menu.css" rel="stylesheet" type="text/css" />
        <link href="static/components/value.css" rel="stylesheet" type="text/css" />
        <link href="static/components/raster.css" rel="stylesheet" type="text/css" />
        <link href="static/components/pointer.css" rel="stylesheet" type="text/css" />
        <link href="static/components/slider.css" rel="stylesheet" type="text/css" />
        <link href="static/components/spa_similarity.css" rel="stylesheet" type="text/css" />
        <link href="static/components/netgraph.css" rel="stylesheet" id="netgraphcss" type="text/css" />
        <link href="static/components/xyvalue.css" rel="stylesheet" type="text/css" />
        <link href="static/modal.css" rel="stylesheet" type="text/css" />
        <link href="static/tooltips.css" rel="stylesheet" type="text/css" />
        <link href="static/sim_control.css" rel="stylesheet" type="text/css" />
        <link href="static/ace.css" rel="stylesheet" type="text/css" />
        <link href="static//lib/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="static/top_toolbar.css" rel="stylesheet" type="text/css" />
        <link href="static/lib/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="static/lib/js/jqueryFileTree/jqueryFileTree.css" rel="stylesheet" type="text/css">
        <link href="static/side_menu.css" rel="stylesheet" type="text/css" />
    </head>
    <!-- body needs an ID to fix cursor in Firefox -->

    <body id="body" onload="onload();">
        <!-- Contains all sidenav html -->
        <div id="top_toolbar_div">
            <ul id='toolbar_object' class="nav nav-pills">
                <li id='Open_file_button' role="presentation">
                    <a title='Open file' class='glyphicon glyphicon-folder-open'> </a>
                </li>
                <li id='Config_menu' role="presentation">
                    <a title='Utilities' class='glyphicon glyphicon-wrench'> </a>
                </li>
                <li id='Reset_layout_button' role="presentation">
                    <a title='Reset model layout' class='glyphicon glyphicon-trash'> </a>
                </li>
                <li id='Undo_last_button' role="presentation">
                    <a title='Undo last' class='glyphicon glyphicon-share-alt reversed'> </a>
                </li>
                <li id='Redo_last_button' role="presentation">
                    <a title='Redo last' class='glyphicon glyphicon-share-alt'> </a>
                </li>
                <li id='Forum_link' role="presentation" onclick="window.open('https://forum.nengo.ai');">
                    Help
                </li>
                <li id='Help_button' role="presentation">
                    <a title='List of hotkeys' class='glyphicon glyphicon-question-sign'> </a>
                </li>
                <li id='Toggle_ace' role="presentation">
                    <a title='Open code editor' class='glyphicon glyphicon-list-alt'> </a>
                </li>
                <li id='Font_decrease' role="presentation">
                    <a title='Decrease font size' class='glyphicon glyphicon-zoom-out'> </a>
                </li>
                <li id='Font_increase' role="presentation">
                    <a title='Increase font size' class='glyphicon glyphicon-zoom-in'> </a>
                </li>
                <li id='Save_file' class='disabled' role="presentation">
                    <a title='Save file' class='glyphicon glyphicon-floppy-save'> </a>
                </li>
                <li id='Sync_editor_button' class='disabled' role="presentation">
                    <a title='Sync diagram with editor' class='glyphicon glyphicon-circle-arrow-left'> </a>
                </li>
                <li role="presentation">
                    <div id='filename'></div>
                </li>
            </ul>
        </div>
        <div id="vmiddle">
          <div class="sidenav-container">

              <!-- holds all the sidenav content -->
              <div id="Menu_content">

                  <!-- tab-content hold the content for their correpsonding sidenav tab -->
                  <!-- The first tab-content holds the content for the first menu tab -->
                  <div class="tab-content">
                      <div id="filebrowser"></div>
                  </div>

                  <div class="tab-content">
                      <div class="accordion-container" id="accordion-container1">
                          <!-- side-menu-item creates a menu item for non accordion content -->
                          <div id='Config_button' class="side-menu-item">
                              <p class="title">Configure Settings</p>
                              <p class="icon">
                                  <span class='glyphicon glyphicon-cog'></span>
                              </p>
                          </div>

                          <div class="accordion-toggle">
                              <p class="title">Download</p>
                              <p class="icon">
                                  <span class="glyphicon glyphicon-chevron-down"></span>
                              </p>
                          </div>
                          <div class="accordion-content">
                              <div class="side-menu-item indent" id="Download_button">
                                  <p class="title">Download Simulation Data</p>
                                  <p class="icon">
                                      <span class="glyphicon glyphicon-signal"></span>
                                  </p>
                              </div>
                              <div class="side-menu-item indent" id='Pdf_button'>
                                  <p class="title">Export layout as SVG</p>
                                  <p class="icon">
                                      <span class="glyphicon glyphicon-picture"></span>
                                  </p>
                              </div>
                          </div>

                          <div id='Minimap_button' class="side-menu-item">
                              <p class="title">Minimap</p>
                              <p class="icon">
                                  <span class='glyphicon glyphicon-credit-card'></span>
                              </p>
                          </div>

                      </div>
                  </div>
              </div>
          </div>
          <div id="main" class="droppable"></div>
          <div id="rightpane"></div>
        </div>
        <div id="control">
            <button id='reset_button' class="btn btn-default reset-button">
                <span id='reset_button_icon' class="glyphicon glyphicon-fast-backward">
                </span>
            </button>
            <div class="time_slider">
                <div class="shown_time"></div>
            </div>
            <button id='pause_button' class="btn btn-default play-pause-button">
                <span id='pause_button_icon' class="glyphicon glyphicon-play">
                </span>
            </button>
            <div id='time_table' >
                <div id='speed_throttle'></div>
                <table class='table metrics-container'>
                    <tbody>
                        <tr id="rate_tr"><td></td><td></td></tr>
                        <tr id="ticks_tr"><td></td><td></td></tr>
                    </tbody>
                </table>
            </div>
            <div id="statusbar">
                <div id="build-progress">
                    <div class="pb-text"></div>
                    <div class="pb-fill">&nbsp;</div>
                </div>
            </div>
        </div>
        <div class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body"></div>
              <div class="modal-footer"></div>
            </div>
          </div>
        </div>
        <script>
            function onload() {
                viewport = new Nengo.Viewport();
                main = document.getElementById("main");
                control = document.getElementById("control");
                %(components)s
            }
        </script>
        <script src="static/lib/js/ace-src-min/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="static/lib/js/ace-src-min/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="static/lib/js/interact-1.2.6.js"></script>
        <script src="static/lib/js/d3.v3.min.js" charset="utf-8"></script>
        <script src="static/lib/js/jquery-2.1.3.min.js"></script>
        <script src="static/lib/js/jquery-ui-1.9.2.min.js"></script>
        <script src="static/lib/js/jqueryFileTree/jqueryFileTree.js" type="text/javascript"></script>
        <script src="static/lib/js/bootstrap.min.js"></script>
        <script src="static/lib/js/validator.js"></script>
        <script src="static/nengo.js"></script>
        <script src="static/config.js"></script>
        <script src="static/datastore.js"></script>
        <script src="static/components/component.js"></script>
        <script src="static/components/2d_axes.js"></script>
        <script src="static/components/xy_axes.js"></script>
        <script src="static/components/time_axes.js"></script>
        <script src="static/components/value.js"></script>
        <script src="static/components/xyvalue.js"></script>
        <script src="static/components/raster.js"></script>
        <script src="static/components/slider.js"></script>
        <script src="static/components/slidercontrol.js"></script>
        <script src="static/components/pointer.js"></script>
        <script src="static/components/progress.js"></script>
        <script src="static/components/spa_similarity.js"></script>
        <script src="static/components/htmlview.js"></script>
        <script src="static/components/netgraph.js"></script>
        <script src="static/components/netgraph_item.js"></script>
        <script src="static/components/netgraph_conn.js"></script>
        <script src="static/components/image.js"></script>
        <script src="static/sim_control.js"></script>
        <script src="static/top_toolbar.js"></script>
        <script src="static/modal.js"></script>
        <script src="static/tooltips.js"></script>
        <script src="static/menu.js"></script>
        <script src="static/side_menu.js"></script>
        <script src="static/viewport.js"></script>
        <script src="static/hotkeys.js"></script>
        <script src="static/ace.js"></script>
        <script src="static/data_to_csv.js"></script>
        <script src="static/info_line.js"></script>
    </body>

</html>
