@(tables: Seq[gitbucket.core.controller.Table])(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@gitbucket.core.html.main("Database viewer") {
  @gitbucket.core.admin.html.menu("dbviewer") {
    <div class="container">
      <div class="col-md-3">
        <div id="table-tree">
          <ul>
          @tables.map { table =>
            <li data-jstree='{"icon":"@context.path/assets/common/images/table.gif"}'><a href="javascript:void(0);" class="table-link">@table.name</a>
              <ul>
              @table.columns.map { column =>
                <li data-jstree='{"icon":"@context.path/assets/common/images/column.gif"}'>@column.name
                  @if(column.primaryKey){ (PK) }
                </li>
              }
              </ul>
            </li>
          }
          </ul>
        </div>
      </div>
      <div class="col-md-9">
        <div id="editor" style="width: 100%; height: 300px;"></div>
        <div class="block">
          <input type="button" value="Run query" id="run-query" class="btn btn-success">
          <input type="button" value="Clear" id="clear-query" class="btn btn-default">
        </div>
        <div id="result"></div>
      </div>
    </div>
  }
}
<script src="@helpers.assets("/vendors/ace/ace.js")" type="text/javascript" charset="utf-8"></script>
<script src="@helpers.assets("/vendors/vakata-jstree-3.3.4/jstree.min.js")" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="@helpers.assets("/vendors/vakata-jstree-3.3.4/themes/default/style.min.css")" />
<script src="@helpers.assets("/vendors/jquery-contextmenu/jquery.contextMenu.min.js")" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="@helpers.assets("/vendors/jquery-contextmenu/jquery.contextMenu.min.css")" />
<script>
$(function(){
  $('#editor').text($('#initial').val());
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/sql");

  $('#table-tree').jstree();

  $.contextMenu({
    selector: '.table-link',
    trigger: 'left',
    items: {
      "select": { name: "Select",
        callback: function(itemKey, opt){
          editor.setValue('SELECT * FROM ' + opt.$trigger.text());
        }
      }@*,
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
      *@
    }
  });

  $('#clear-query').click(function(){
    editor.setValue('');
  });

  $('#run-query').click(function(){
    var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange()).trim();

    $.post('@context.path/admin/dbviewer/_query', { query: selectedText == '' ? editor.getValue() : selectedText },
      function(data){
        if(data.type == "query"){
          var table = $('<table class="table table-bordered table-hover table-scroll">');

          var header = $('<tr>');
          $.each(data.columns, function(i, column){
            header.append($('<th>').text(column));
          });
          table.append($('<thead>').append(header));

          var body = $('<tbody>');
          $.each(data.rows, function(i, rs){
            var row = $('<tr>');
            $.each(data.columns, function(i, column){
              row.append($('<td>').text(rs[column]));
            });
            body.append(row);
          });

          table.append(body);
          $('#result').empty().append(table);

        } else if(data.type == "update"){
          $('#result').empty().append($('<span>').text('Updated ' + data.rows + ' rows.'));

        } else if(data.type == "error"){
          $('#result').empty().append($('<span class="error">').text(data.message));
        }
      }
    );
  });
});
</script>