= form_for query, html: {class: 'form form-horizontal query-form', role: 'form'} do |f|
  .page-header
    h1
      = title
      .actions.btn-in-header
        button.btn.btn-primary
          i.fa.fa-floppy-o.fa-pad-r
          | Save
        - if f.object.persisted?
          = link_to 'Cancel', f.object, class: 'btn btn-default'

  .form-group
    = f.label :name, class: 'col-sm-2 control-label'
    .col-sm-8
      = f.text_field :name, class: 'form-control', required: true

  .form-group
    = f.label :description, class: 'col-sm-2 control-label'
    .col-sm-8
      = f.text_area :description, class: 'form-control', required: true

  .form-group
    = f.label :query, class: 'col-sm-2 control-label'
    .col-sm-8
      = f.text_area :query, class: 'form-control', rows: 10, required: true

ul.nav.nav-tabs[role='tablist']
  li.active
    a[role='tab' data-toggle='tab' href='#preview' ]
      i.fa.fa-eye.fa-pad-r
      | Preview
  li
    a[role='tab' data-toggle='tab' href='#explain' ]
      i.fa.fa-info.fa-pad-r
      | Explain
  li
    a[role='tab' data-toggle='tab' href='#current-tables']
      i.fa.fa-database.fa-pad-r
      | Tables

.tab-content
  #preview.tab-pane.active
    h3
      | Query preview
      small
        = link_to preview_path, class: 'js-preview-button', data: {source: '#query_query', result: '.js-preview-result', remote: true, method: 'POST'} do
          i.fa.fa-refresh.fa-pad-r[data-title='Refresh preview']
          | Reflesh

    .js-preview-result
      .alert.alert-info Preview is shown here

  #explain.tab-pane
    h3
      | Query explain
      small
        = link_to explain_path, class: 'js-explain-button', data: {source: '#query_query', result: '.js-explain-result', remote: true, method: 'POST'} do
          i.fa.fa-refresh.fa-pad-r[data-title='Refresh explain']
          | Reflesh

    .js-explain-result
      .alert.alert-info Explain result is shown here

  #current-tables.tab-pane
    a.loading[href=current_tables_path]

javascript:
  $(function() {
    Adhoq.enablePreview($('#preview a.js-preview-button'));
    Adhoq.enablePreview($('#explain a.js-explain-button'));

    $('a[data-toggle="tab"]').on('show.bs.tab', function(ev) { Adhoq.loadCurrentTableTabOnce($(ev.target)) });
  });