{% extends "base_table.html" %}

{% block extra_head %}
<style type="text/css">
  pre { clear: right; }
</style>
{% endblock %}

{% block extra_scripts %}
  <script type="text/javascript">
    $(function() {
      /* Recent queries and bookmarks. */
      var sql = {% if sql and not error %}`{{ sql }}`{% else %}''{% endif %};
      var Recent = new App.Recent();
      Recent.initialize(sql);

      var bookmarks = new App.Bookmarks();
      bookmarks.initialize();
    });
  </script>
{% endblock %}

{% block query_tab_class %} active{% endblock %}

{% block inner_content %}
  <h3>
    <p class="float-right">
      <a class="btn btn-primary btn-xs" href="#" id="toggleTableInfo">+/- table definition</a>
    </p>
    Query
  </h3>
  <div id="tableInfo">
    {{ table_sql|format_create_table|highlight }}
  </div>
  <form action="." id="query-form" method="post" role="form">
    <input name="ordering" type="hidden" value="" />
    <input name="export_ordering" type="hidden" value="{% if ordering %}{{ ordering }}{% endif %}" />
    <div class="form-group{% if error %} has-error has-feedback{% endif %}">
      <textarea class="form-control remember-size{% if error %} is-invalid{% endif %}" id="table-sql" name="sql" style="height: 120px;">{% if sql %}{{ sql }}{% else %}{{ default_sql }}{% endif %}</textarea>
      <small class="form-text text-muted">Use Shift + Up/Down to navigate recently-executed queries</small>
      {% if error %}
        <div class="invalid-feedback">{{ error }}</div>
      {% endif %}
    </div>
    <button class="btn btn-primary" type="submit">Execute</button>
    <button class="btn btn-secondary" name="export_json" type="submit">Export JSON</button>
    <button class="btn btn-secondary" name="export_csv" type="submit">Export CSV</button>
    <div class="btn-group">
      <div class="dropdown">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">SQL Help</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          {% for parts, img_url in query_images %}
            <a class="dropdown-item sql-image" href="{{ url_for('static', filename=img_url) }}">{{ ' : '.join(parts) }}</a>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="float-right">
      <div class="btn-group">
        <div class="dropdown">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">Bookmarks</button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" id="bookmarks"></div>
        </div>
        <button class="btn btn-secondary" id="add-bookmark" title="Add Bookmark" type="button">+</button>
      </div>
    </div>
  </form>
  <hr />

  {% if row_count is not none and row_count >= 0 %}
    <p>Rows modified: <code>{{ row_count }}</code></p>
  {% endif %}

  {% if data_description %}
    {% if not data %}
      <p>Empty result set.</p>
    {% else %}
      {% if allow_bulk %}
        <form action="." autocomplete="off" method="post">
          <textarea name="sql" style="display: none;">{% if sql %}{{ sql }}{% else %}{{ default_sql }}{% endif %}</textarea>
          <div class="float-right">
            <a class="btn btn-default" href="{{ url_for('table_query', table=table, sql=sql) }}{% if ordering %}&ordering={{ ordering }}{% endif %}{% if page > 1 %}&page={{ page }}{% endif %}">Permalink</a>
            <button class="btn btn-danger bulk-action" disabled name="action" type="submit" value="bulk-delete">Bulk Delete</button>
          </div>
      {% else %}
        <div class="float-right">
          <a class="btn btn-default" href="{{ url_for('table_query', table=table, sql=sql) }}{% if ordering %}&ordering={{ ordering }}{% endif %}{% if page > 1 %}&page={{ page }}{% endif %}">Permalink</a>
        </div>
      {% endif %}
      <h3>
        Results ({% if total >= 0 %}{% if total_pages > 1 %}{{ page_start }}&ndash;{{ page_end }} of {% endif %}{{ total }}{% else %}unable to determine{% endif %})
      </h3>
      <table class="table table-striped small cell-content">
        <thead>
          <tr>
            {% if allow_bulk %}
              <th style="width:24px;"><input id="toggle-pk-all" type="checkbox" /></th>
            {% endif %}
            {% for col_desc in data_description %}
              <th>
                <a class="sort-header" href="{{ url_for('table_query', table=table, sql=sql) }}&ordering={% if loop.index == ordering %}-{% endif %}{{ loop.index }}">{{ col_desc[0] }}{% if ordering is not none %}{% if loop.index == ordering %}&#9660;{% elif loop.index == -ordering %}&#9650;{% endif %}{% endif %}</a>
              </th>
            {% endfor %}
            {% if allow_edit %}<th></th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% for row in data %}
            <tr>
              {% if allow_bulk %}
                <td><input class="toggle-pk" name="pk" type="checkbox" value="{{ row[pk_index] }}" /></td>
              {% endif %}
              {% for value in row %}
                <td>
                  {% if value is none %}<code>NULL</code>{% else %}{{ value|value_filter|safe }}{% endif %}
                </td>
              {% endfor %}
              {% if allow_edit %}
                <td>
                  <a class="small" href="{{ url_for('table_update', table=table, pk=row[pk_index]) }}">Edit</a>
                  <a class="small" href="{{ url_for('table_delete', table=table, pk=row[pk_index]) }}">Delete</a>
                </td>
              {% endif %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if pk_index is not none and not dataset.is_readonly %}</form>{% endif %}
      {% include "pagination.html" %}
    {% endif %}
  {% endif %}
  <div class="modal fade" id="sql-image-modal" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="bookmark-modal" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Create Bookmark</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="save-form" role="form">
            <div class="form-group">
              <input class="form-control" id="bookmark-name" name="name" placeholder="Bookmark name..." value="" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="save-bookmark">Save</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}