{% extends "panoramix/basic.html" %}

{% block head_css %}
  {{super()}}
  <link rel="stylesheet" type="text/css" href="/static/assets/vendor/dataTables/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="/static/assets/vendor/dataTables/dataTables.bootstrap.css" />
  <style type="text/css">
    .topsql {
      height: 250px;
    }
    .dataTables_filter {
      padding-top: 5px;
      padding-right: 5px;
    }
    .bordered {
      padding: 0px 0px;
      border: 1px solid grey;
      border-radius: 5px;
      background-color: #EEE;
    }
    div.alert {
      padding: 5px;
      margin: 0px;
    }
    .metadata {
      overflow: auto;
      width: 300px;
      height: 100px;
    }
    .fillup {
      width: 100%;
      height: 100%;
    }
    .fillheight {
      height: 100%;
    }
    .interactions {
      padding-bottom: 10px;
    }
    #results {
      overflow: auto;
      font-size: 12px;
      margin-bottom: 5px;
    }
    table tbody tr td {
      padding: 1px 4px;
      font-size: small;
    }

  </style>
{% endblock %}

{% block body %}
<div class="container-fluid">
  <div class="sqlcontent" style="display: none;">
    <h3>db: [{{ db }}]</h3>
    <div class="row interactions">
      <div class="col-xs-7">
        <input type="hidden" id="database_id" value="{{ db.id }}">
        <button class="btn btn-primary" id="run">Run!</button>
        <button class="btn btn-default" id="create_view">Create View</button>
      </div>
      <div class="col-xs-5">
        <select id="dbtable">
          {% for t in tables %}
            <option value="{{ t }}"
                {{ "selected" if t == table_name else '' }}>
              {{ t }}
            </option>
          {% endfor %}
        </select>
        <button class="btn btn-default" id="select_star">SELECT *</button>
      </div>
    </div>
    <div class="topsql row">
      <div class="col-xs-7 fillheight">
        <textarea id="sql" class="fillup"></textarea>
      </div>
      <div class="col-xs-5 fillheight">
        <div class="metadata fillup bordered"></div>
      </div>
    </div>
    <div id="interactive">
    </div>
    <div id="results_section">
      <hr/>
      <img id="loading" width="25" style="display: none;" src="/static/img/loading.gif">
    </div>
    <div>
      <div id="results" class="bordered" style="display: none;"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block tail_js %}
{{ super() }}
<script src="/static/assets/javascripts/dist/sql.entry.js"></script>
{% endblock %}
