<!DOCTYPE html>

<html>

  <head>
    <base href="{{ resource_root }}">
    <title>HTSQL</title>
    <script type="text/javascript" src="vendor/jquery/jquery-1.6.4.min.js"></script>
    <link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="vendor/codemirror/theme/default.css">
    <link rel="stylesheet" href="cm-htsql-mode.css">
    <script type="text/javascript" src="vendor/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="cm-htsql-mode.js"></script>
    <link rel="stylesheet" href="shell.css">
    <script type="text/javascript" src="shell.js"></script>
  </head>

  <body data-database-name="{{ database_name }}"
        data-htsql-version="{{ htsql_version }}"
        data-htsql-legal="{{ htsql_legal }}"
        data-server-root="{{ server_root }}"
        data-query-on-start="{{ query_on_start }}"
        data-evaluate-on-start="{{ evaluate_on_start }}"
        data-can-read-on-start="{{ can_read_on_start }}"
        data-can-write-on-start="{{ can_write_on_start }}"
        data-implicit-shell="{{ implicit_shell }}">

    <div id="viewport">
      <div class="heading-area">
<!--        <img id="logo" alt="HTSQL" src="data:image/png;base64, "> -->
        <em id="database">HTSQL</em>
        <ul class="menu">
          <li><button id="schema">Schema</button></li>
          <li><button id="help">Help</button></li>
        </ul>
      </div>
      <div class="input-area">
        <div class="editor-box">
          <textarea id="editor"></textarea>
          <div class="expansion-control">
            <ul>
              <li><button id="shrink">&#x25B3;</button></li>
              <li><button id="expand">&#x25BD;</button></li>
            </ul>
          </div>
        </div>
        <div class="button-box">
          <ul>
            <li><button id="run">Run</button></li>
            <li><button id="more">More&nbsp;&#x25BE;</button></li>
          </ul>
        </div>
      </div>
      <div class="output-area">
        <div id="product-panel" class="panel">
          <div id="grid">
            <div id="grid-head"></div>
            <div id="grid-body"></div>
          </div>
        </div>
        <div id="request-panel" class="panel">
          <div class="notification">
            <strong>Executing a database request.  Please wait&hellip;</strong>
          </div>
        </div>
        <div id="sql-panel" class="panel">
          <div class="notification">
            <pre id="sql"></pre>
            <button id="close-sql" class="close">&times;</button>
          </div>
        </div>
        <div id="error-panel" class="panel">
          <div class="alert">
            <pre id="error"></pre>
            <pre id="error-hint"></pre>
            <button id="close-error" class="close">&times;</button>
          </div>
        </div>
        <div id="failure-panel" class="panel">
          <div class="alert">
            <strong>The server failed to perform the request.</strong>
            <button id="close-failure" class="close">&times;</button>
          </div>
        </div>
      </div>
      <div class="footer-area"></div>
      <div id="popups" class="popup-area">
        <div id="more-popup" class="popup">
          <ul>
            <li><button id="export-html">Export to HTML</button></li>
            <li><button id="export-json">Export to JSON</button></li>
            <li><button id="export-xml">Export to XML</button></li>
            <li><button id="export-csv">Export to CSV</button></li>
            <li><button id="export-tsv">Export to TSV</button></li>
            <li><button id="show-sql">Show SQL</button></li>
          </ul>
        </div>
        <div id="complete-popup" class="popup code">
          <select id="complete">
          <select>
        </div>
        <div id="help-popup" class="popup">
          <h1>HTSQL</h1>
          <h2>version <strong id="version">2.0</strong></h2>
          <p>
            This is an editor for HTSQL database queries.  There
            are a few keyboard shortcuts that are available.
          </p>
          <dl>
            <dt>CTRL+ENTER</dt>
            <dd>run the current query</dd>
            <dt>CTRL+UP/DOWN</dt>
            <dd>change size of query area</dd>
            <dt>CTRL+SPACE</dt>
            <dd>auto-complete table, column and link names</dd>
          </dl>
          <p>For more information, please visit http://htsql.org/.</p>
          <pre id="legal" class="legal">Copyright (c) 2006-2013, Prometheus Research, LLC</pre>
          <div class="banner"><img src="./htsql_88x31.png"/></div>
        </div>
      </div>
    </div>

  </body>

</html>

