<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Domain visualizer</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script
       src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"
       charset="utf-8"></script>
    <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
       integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
       crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
	<form class="navbar-form">
	  <input type="file" class="form-control" id="domainFile">
	  <select class="form-control" id="rootSelect"></select>
	</form>
      </div>
    </nav>
    <div class="container" id="main">
      <p id="errors"></p>
      <svg width="100%"></svg>
      <table class="table table-striped">
	<caption>Nodes</caption>
	<thead><tr><th>index</th><th>value</th></tr></thead>
	<tbody id="node-index"></tbody>
      </table>
      <table class="table table-condensed">
	<caption>Edges</caption>
	<tbody id="edge-index"></tbody>
      </table>
    </div>
    <script
       src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <script
       src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
       integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
       crossorigin="anonymous"></script>
    <script src="domain-visualizer.js"></script>
  </body>
</html>
