<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    <script type="text/javascript" src="hyrise-sql-connector.js"></script>
    <script type="text/javascript" src="ui.js"></script>
    <link href="style.css" rel="stylesheet" />
    <title>Hyrise SQL Frontend</title>
  </head>
  <body>
    <div class="content">
      <div class="row">
        <div class="col-lg-6">
          <!-- Config -->
          <div class="row">
            <div class="form-group col-sm-12">
              <input type="text" class="form-control" id="endpointInput" placeholder="Hyrise Host" value="http://localhost:5000/query" />
            </div>
          </div>

          <!-- Sample Queries -->
          <div class="row" style="margin-bottom: 10px;">
            <div class="col-sm-8" id="sampleQueries"></div>
            <div class="col-sm-4" id="buggyQueries"></div>
          </div>

          <!-- Input -->
          <div class="row">
            <div class="col-sm-12">
              <textarea id="queryInput" class="form-control" style="height: 300px; resize: none;" placeholder="Enter your SQL query here..."></textarea>
            </div>
          </div>

          <!-- Submit -->
          <div class="row" style="margin: 10px 0px;">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary" id="submitBtn">Submit Query (Shift + Enter)</button>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-12">
              <!-- View: Performance Data -->
              <h3>Performance Data</h3>
              <table id="performanceDataTable" class="table table-bordered table-striped table-hover">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Duration</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>

        </div>
        <div class="col-lg-6">
          <!-- View: Result Table -->
            <h3>Results (first 100 rows)</h3>
          <div id="msgContainer" class="alert alert-success" role="alert">
            <div id="resultInfo">Frontend Ready</div>
          </div>
          <table id="resultTable" class="table table-bordered table-striped table-hover"></table>
        </div>
      </div>
    </div>
  </body>
</html>