{% extends "base_table.html" %}

{% block extra_scripts %}
  <script type="text/javascript">
    $(function() {
      $('a.view-sql').on('click', function(e) {
        e.preventDefault();
        var elem = $(this),
            pre = elem.siblings('div'),
            modalDiv = $('div#sql-modal');
        modalDiv.find('h4.modal-title').text(elem.data('name'));
        modalDiv.find('.modal-body').empty().append(pre.clone().show());
        modalDiv.modal();
      });
    });
  </script>
{% endblock %}

{% block structure_tab_class %}active{% endblock %}

{% block inner_content %}
  <h3 id="sql">SQL</h3>
  {{ table_sql|format_create_table|highlight }}

  <h3 id="columns">
    <p class="pull-right"><a class="btn btn-primary btn-sm" href="{{ url_for('add_column', table=table) }}">Add column</a></p>
    Columns
  </h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Column</th>
        <th>Data type</th>
        <th>Allow null</th>
        <th>Primary key</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for column in columns %}
        <tr>
          <td><code>{{ column.name }}</code></td>
          <td><code>{{ column.data_type }}</code></td>
          <td>
            {% if column.null %}
              <span class="glyphicon glyphicon-ok"></span>
            {% endif %}
          </td>
          <td>
            {% if column.primary_key %}
              <span class="glyphicon glyphicon-ok"></span>
            {% endif %}
          </td>
          <td>
            <a href="{{ url_for('rename_column', table=table, rename=column.name) }}">Rename</a>
            <span class="separator">|</span>
            <a href="{{ url_for('drop_column', table=table, name=column.name) }}">Drop</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <hr />

  {% if foreign_keys %}
    <h3 id="foreign-keys">Foreign Keys</h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Column</th>
          <th>Destination</th>
        </tr>
      </thead>
      <tbody>
        {% for foreign_key in foreign_keys %}
          <tr>
            <td><code>{{ foreign_key.column }}</code></td>
            <td><code>{{ foreign_key.dest_table }}.{{ foreign_key.dest_column }}</code></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    <hr />
  {% endif %}

  <h3 id="indexes">
    <p class="pull-right"><a class="btn btn-primary btn-sm" href="{{ url_for('add_index', table=table) }}">Add index</a></p>
    Indexes
  </h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Columns</th>
        <th>Unique</th>
        <th>SQL</th>
        <th>Drop?</th>
      </tr>
    </thead>
    <tbody>
      {% for index in indexes %}
        <tr>
          <td>{{ index.name }}</td>
          <td>
            {% if index.columns|length == 1 %}
              <code>{{ index.columns[0] }}</code>
            {% else %}
              <ul>
                {% for column in index.columns %}
                  <li><code>{{ column }}</code></li>
                {% endfor %}
              </ul>
            {% endif %}
          </td>
          <td>
            {% if index.unique %}
              <span class="glyphicon glyphicon-ok"></span>
            {% endif %}
          </td>
          <td>
            <a class="view-sql" data-name="{{ index.name }}" href="#">SQL</a>
            <div style="display:none;">{% if index.sql %}{{ index.sql|highlight }}{% else %}-- no sql found --{% endif %}</div>
          </td>
          <td>
            <a href="{{ url_for('drop_index', table=table, name=index.name) }}">Drop</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if triggers %}
    <hr />
    <h3 id="triggers">
      {#<p class="pull-right"><a class="btn btn-primary btn-sm" href="{{ url_for('add_trigger', table=table) }}">Add trigger</a></p>#}
      Triggers
    </h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>SQL</th>
          <th>Drop?</th>
        </tr>
      </thead>
      <tbody>
        {% for trigger in triggers %}
          <tr>
            <td>{{ trigger.name }}</td>
            <td>
              <a class="view-sql" data-name="{{ trigger.name }}" href="#">SQL</a>
              <div style="display:none;">{{ trigger.sql|highlight }}</div>
            </td>
            <td>
              <a href="{{ url_for('drop_trigger', table=table, name=trigger.name) }}">Drop</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endif %}
  <div class="modal fade" id="sql-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
{% endblock %}