<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>BokehJS Demos</title>
  <link rel="stylesheet" href="/static/vendor/qunit/css/qunit.css" type="text/css" media="screen">
  <script type="text/javascript" src="/static/vendor/qunit/js/qunit.js"></script>
  <link type="text/css" rel="stylesheet" href="/static/vendor/jquery/css/themes/base/jquery-ui.min.css"/>
  <link type="text/css" rel="stylesheet" href="/static/css/bokeh.css"/>
  <link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css"/>
  <!-- Your project file goes here -->

  <!-- These are 3rd party libs that we depend on.  In debug mode, this
  should be a list of JS files.  In prod mode, this should be a single
  minified/unified JS file. -->
  {% for jsfile in jslibs %}
  <script type="text/javascript" src="{{jsfile}}"></script>
  {% endfor %}

  <!-- These are our JS files which are managed by Hem, and built as
  needed from the coffee sources. -->
  {% for jsfile in hemfiles %}
  <script type="text/javascript" src="{{jsfile}}"></script>
  {% endfor %}

  <script>
    {% for demoscript in demos %}
    require("{{ demoscript }}");
    {% endfor %}
  </script>
<style>

  .topdiv { padding: 50px; }
  .all_can_wrapper {position:relative; }
  .can_wrapper {position:absolute; }
  .main_ can_wrapper {border:1px dotted green;}
  .main_can {border:1px solid blue}
  .y_can {}
  ._shader {display:none; }
  .shading ._shader {display:block; border:1px dashed green; position: absolute; z-index:-10;}

  .gridplot_container {position: relative;}
  .gridplot_container .gp_plotwrapper { position:absolute; }

  .table_wrap table { margin:5px; border:1px solid orange;  height:300px; display:block; overflow-y:scroll }

  .demotable { border: 1px solid #000000; margin-top: 50px; }
  .demotable th { width: 200px; }
  .demotable td { border: 1px solid #000000; padding: 30px; vertical-align: text-top; }

/*
  .table_outer thead { fon t-size:15px; display:block; height: 100px; overflow:auto; outline:1px  solid green}

  .table_outer tbody { font -size:10px; display:table; height: 200px; overflow-y:scroll; outline:1px  solid blue}
  .table_outer table td { border-left:1px solid black; border-right:1px solid black; }
*/
</style>

</head>
<body>
  <div class="topdiv">
    <h1> Welcome to the bokehjs demoserver </h1>
      <p>To run the demos and tests, hem must be running via <code>hem server -s slug.all.json</code></p>
      <table class="demotable">
          <tr><th><h2>Demos</h2></th>
              <th><h2>Glyph Unit Tests</h2></th>
              <th><h2>Other Unit Tests</h2></th>
          </tr>

          <tr><td>
            <ul>
              {% for demo in alldemos['all'] %}
                <li>
                  <a href="/demo/{{demo}}">{{demo}}</a>
                </li>
              {% endfor %}
            </ul>
          </td>

          <td>
            <ul>
            {% for test in alltests['prim'] %}
              <li>
                <a href="/test/{{test}}">{{test}}</a>
              </li>
            {% endfor %}
            </ul>
          </td>
    
          <td>
            <ul>
            {% for test in alltests['nonprim'] %}
              <li>
                <a href="/test/{{test}}">{{test}}</a>
              </li>
            {% endfor %}
            </ul>
          </td></tr>
  </table>
  </div>
</body>
</html>
