<html>
  {{> partials/head title="Query" }}
  <body>

    {{> partials/prefix isQuery=true}}

    <!-- Query Input -->
    <form action="query" method="post">
      <textarea name="query" class="query-input" placeholder="Enter your query...">{{query}}</textarea>
      <input type="hidden" name="db" value="{{database}}" />
      <input type="submit" name="action" value="run" />
      or
      <input type="submit" name="action" value="analyze" />
      or
      <button onclick="onFormatClicked(event)">format</button>
    </form>

    <!-- Query Result -->
    <h1>Data</h1>
    {{#if queryResult}}
      {{queryResult.rowCount}} row(s). <br />
      {{queryResult.timeToFirstRow}} ms to read the first row. <br />
      {{queryResult.timeToReadRows}} ms to read the rest of the rows. <br />
      <br />
      <table>
        <tr>
          {{#each queryResult.columns}}
            <th>{{this}}</th>
          {{/each}}
        </tr>
        {{#each queryResult.rows}}
          <tr>
            {{#each this}}
              <td><pre>{{{this}}}</pre></td>
            {{/each}}
          </tr>
        {{/each}}
      </table>
    {{else}}
      No data.
    {{/if}}

    {{> partials/suffix}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" integrity="sha512-JPoVzOHQvXbB4+lOX6GOBM3xOZhwAMKRYn2G0VpfPcwIixAAvPL+HKuaFuevm+i6Q4GktSKY/CxlcB/1BaV/6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
      function onFormatClicked(e) {
        e.preventDefault();
        const queryInput = document.querySelector('.query-input')
        queryInput.value = sqlFormatter.format(queryInput.value).replaceAll("! =", "!=").replaceAll("| |", "||");
      }

      function submitOnEnter(event){
        if (event.which === 13 && event.shiftKey) {
          event.target.form.submit();
          event.preventDefault();
        }
      }

      document.querySelector('.query-input').addEventListener("keypress", submitOnEnter);
    </script>
  </body>
</html>
