<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="icon" type="image/svg+xml" href="./img/favicon.svg">

    <title>Energy+ Workflow v1.0</title>
  </head>
  <body>
    <img class="stretch" src="img/header.jpg">
    <div id="main">
      <h1>
        <span id="node-app_name"></span> <span id="node-version"></span>
      </h1>
      <div id="controls">
        <label for="gml">Select a citygml file:</label><br />
        <button id="gml" name="gml">CityGml...</button>
        <label id="gml_file_path"/><br />
        <script src="./js/renderer.js"></script>
      </div>
      <img id="spinner" src="img/spinner.gif" width="50px" style="visibility: hidden"/>
      <div id="debug_div" style="visibility: hidden">
        <label id="debug"></label>
      </div>
      <div id="outputs" style="visibility: hidden; position: relative; width:65vw; height: 55vh;">
        <h4>Outputs</h4>
        <canvas id="chart"></canvas>
        <div id="links">
          <table>
          <tr><td><label>IDF File:</label></td><td><a id="idf" target="_blank"></a></td></tr>
          <tr><td><label>CSV File:</label></td><td><a id="csv" target="_blank"></a></td></tr>
          <tr><td><label>ESO File:</label></td><td><a id="eso" target="_blank"></a></td></tr>
          <tr><td><label>Floor area:</label></td><td><label id="area"></label></td></tr>
          <tr><td><label>Building volume:</label></td><td><label id="volume"></label></td></tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>