<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dream Simulation</title>
    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" href="../lib/jquerymobile.css">
    <link rel="stylesheet" href="index.css" />
    <script src="../lib/rsvp.min.js" type="text/javascript"></script>
    <script src="../lib/renderjs.min.js" type="text/javascript"></script>
    <script src="../lib/handlebars.min.js" type="text/javascript"></script>
    <script src="../lib/jquery.js" type="text/javascript"></script>
    <script src="../lib/jquerymobile.js" type="text/javascript"></script>
    <script src="mixin_gadget.js" type="text/javascript"></script>
    <script src="index.js" type="text/javascript"></script>

    <script id="panel-template" type="text/x-handlebars-template">
      <ul data-role="listview">
        <li><a class="home_link ui-btn ui-icon-home ui-btn-icon-left" data-icon="home">Documents</a></li>
        <li><a class="fast_input_link ui-btn ui-icon-plus ui-btn-icon-left" data-icon="plus">New Document</a></li>
        {{#navigationlist}}
          <li><a href="{{link}}">{{title}}</a></li>
        {{/navigationlist}}
      </ul>
    </script>

    <script id="active-navigation-template" type="text/x-handlebars-template">
      <li><a class="ui-btn-active ui-state-persist" href="{{link}}">{{title}}</a></li>
    </script>

    <script id="navigation-template" type="text/x-handlebars-template">
      <li><a href="{{link}}">{{title}}</a></li>
    </script>

    <script id="error-template" type="text/x-handlebars-template">
      <h1>An Error Has Occurred</h1>
      <a href="javascript: location.reload()">Click here to reload the page</a><br/>
      The error detail is:
      <pre>{{error}}</pre>
    </script>

  </head>
  <body>

    <!-- ID are bad, but required for JQM panel -->
    <div class="jqm-navmenu-panel"
         data-role="panel"
         id="leftpanel"
         data-display="overlay"
         data-position="left"
         data-theme="b">
    </div>

    <header data-role="header">

      <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
        <a href="#leftpanel"
           data-icon="bars"
           class="menu_link ui-btn ui-icon-bars ui-btn-icon-left">Menu</a>
        <a data-icon="carat-u"
           class="back_link ui-btn ui-icon-carat-u ui-btn-icon-left">Parent</a>
      </div>
      <h1>Dream Simulation</h1>

      <div data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
        <a data-icon="forward"
           class="next_link ui-btn ui-icon-forward ui-btn-icon-right">Next</a>
      </div>

    </header>

    <div class="nav_container"></div>

    <article class="gadget_container"></article>

    <aside>
      <section data-gadget-url="../jio_bridge/index.html"
               data-gadget-scope="jio"
               data-gadget-sandbox="public"></section>
    </aside>
  </body>
</html>
