{% extends "base.html" %}
{% block title %}{{ config.APP_NAME }} - Datagrid{% endblock %}
{% block css_link %}
<link type="text/css" rel="stylesheet" href="{{ url_for('sqleditor.static', filename='css/sqleditor.css') }}">
{% endblock %}
{% block body %}
<style>
    body {padding: 0px;}
    {% if is_desktop_mode and is_linux %}
    .alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
    .alertify-notifier{-webkit-transform: none;}
    .alertify-notifier .ajs-message{-webkit-transform: none;}
    .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
    .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;}
    {% endif %}
</style>
<div id="main-editor_panel">
    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
        <div class="wcLoadingBackground"></div>
        <span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></span>
        <span class="sql-editor-busy-text wcLoadingLabel"></span>
    </div>
    <div class="sql-editor" data-trans-id="{{ uniqueId }}">
        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
                        title="{{ _('Open File') }}" accesskey="o">
                    <i class="fa fa-folder-open-o" aria-hidden="true"></i>
                </button>
                <button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>
                    <i class="fa fa-floppy-o" aria-hidden="true"></i>
                </button>
                <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled  accesskey="s">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-file-menu-save" href="#">
                            <span>{{ _('Save') }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-file-menu-save-as" href="#">
                            <span>{{ _('Save As') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-find" type="button" class="btn btn-default" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </button>
                <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" accesskey="f">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-find-menu-find" href="#">
                            <span> {{ _('Find') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-next" href="#">
                            <span> {{ _('Find next') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-previous" href="#">
                            <span> {{ _('Find previous') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-persistent" href="#">
                            <span>{{ _('Persistent find') }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-find-menu-replace" href="#">
                            <span> {{ _('Replace') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-replace-all" href="#">
                            <span>{{ _('Replace all') }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-find-menu-jump" href="#">
                            <span>{{ _('Jump (Alt+G)') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-copy-row" type="button" class="btn btn-default"
                        title="{{ _('Copy') }}" disabled accesskey="c">
                    <i class="fa fa-files-o" aria-hidden="true"></i>
                </button>
                <button id="btn-paste-row" type="button" class="btn btn-default"
                        title="{{ _('Paste Row') }}" disabled accesskey="p">
                    <i class="fa fa-clipboard" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-delete-row" type="button" class="btn btn-default"
                        title="{{ _('Delete Row(s)') }}" disabled accesskey="d">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Edit') }}" accesskey="e">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu">
                    <li>
                        <a id="btn-indent-code" href="#">
                            <span> {{ _('Indent Selection (Tab)') }} </span>
                        </a>
                        <a id="btn-unindent-code" href="#">
                            <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
                        </a>
                        <a id="btn-comment-line" href="#">
                            <span> {{ _('Inline Comment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Ctrl+/)') }}{%- endif %}</span>
                        </a>
                        <a id="btn-uncomment-line" href="#">
                            <span> {{ _('Inline Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+.)') }}
                            {% else %}
                                 {{ _(' (Ctrl+.)') }}{%- endif %}</span>
                        </a>
                        <a id="btn-toggle-comment-block" href="#">
                            <span> {{ _('Block Comment/Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Shift+Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Shift+Ctrl+/)') }}{%- endif %}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-filter" type="button" class="btn btn-default"
                        title="{{ _('Filter') }}" disabled accesskey="i">
                    <i class="fa fa-filter" aria-hidden="true"></i>
                </button>
                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a id="btn-filter-menu" href="#">{{ _('Filter') }}</a>
                        <a id="btn-remove-filter" href="#">{{ _('Remove Filter') }}</a>
                        <a id="btn-include-filter" href="#">{{ _('By Selection') }}</a>
                        <a id="btn-exclude-filter" href="#">{{ _('Exclude Selection') }}</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <select class="limit" style="height: 30px; width: 90px;" disabled accesskey="r">
                    <option value="-1">No limit</option>
                    <option value="1000">1000 rows</option>
                    <option value="500">500 rows</option>
                    <option value="100">100 rows</option>
                </select>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-flash" type="button" class="btn btn-default" style="width: 40px;"
                        title="{{ _('Execute/Refresh (F5)') }}">
                    <i class="fa fa-bolt" aria-hidden="true"></i>
                </button>
                <button id="btn-query-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" accesskey="x">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu">
                    <li>
                        <a id="btn-flash-menu" href="#">
                            <span>{{ _('Execute/Refresh (F5)') }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-explain" href="#">
                            <span>{{ _('Explain (F7)') }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-explain-analyze" href="#">
                            <span>{{ _('Explain Analyze (Shift+F7)') }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu dropdown-submenu">
                        <a href="#">{{ _('Explain Options') }}</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a id="btn-explain-verbose" href="#" class="noclose">
                                    <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Verbose') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-costs" href="#" class="noclose">
                                    <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Costs') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-buffers" href="#" class="noclose">
                                    <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Buffers') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-timing" href="#" class="noclose">
                                    <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Timing') }} </span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-auto-commit" href="#">
                            <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true"></i>
                            <span> {{ _('Auto commit?') }} </span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-auto-rollback" href="#">
                            <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>
                            <span> {{ _('Auto rollback?') }} </span>
                        </a>
                    </li>
                </ul>
                <button id="btn-cancel-query" type="button" class="btn btn-default" title="{{ _('Cancel query') }}"
                        disabled accesskey="q">
                    <i class="fa fa-stop" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-clear-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Clear') }}" accesskey="l">
                    <i class="fa fa-eraser" aria-hidden="true"></i>
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu">
                    <li>
                        <a id="btn-clear" href="#">
                            <span> {{ _('Clear Query Window') }} </span>
                        </a>
                        <a id="btn-clear-history" href="#">
                            <span> {{ _('Clear History') }} </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-download" type="button" class="btn btn-default"
                        title="{{ _('Download as CSV (F8)') }}" accesskey="v">
                    <i class="fa fa-download" aria-hidden="true"></i>
                </button>
            </div>
        </div>
        <div class="editor-title" style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
        <div id="filter" class="filter-container hidden">
            <div class="filter-title">Filter</div>
            <div class="sql-textarea">
                <textarea id="sql_filter" rows="5"></textarea>
            </div>
            <div class="btn-group">
                <button id="btn-cancel" type="button" class="btn btn-danger" title="{{ _('Cancel') }}">
                    <i class="fa fa-times" aria-hidden="true"></i> {{ _('Cancel') }}
                </button>
            </div>
            <div class="btn-group">
                <button id="btn-apply" type="button" class="btn btn-primary" title="{{ _('Apply') }}">
                    <i class="fa fa-check" aria-hidden="true"></i> {{ _('Apply') }}
                </button>
            </div>
        </div>
        <div id="editor-panel"></div>
        <iframe id="download-csv" style="display:none"></iframe>
    </div>
</div>
{% endblock %}

{% block init_script %}
	require(['sources/generated/sqleditor'], function(ctx) {
    var $ = pgAdmin.SqlEditor.jquery,
        S = pgAdmin.SqlEditor.S,
        editorPanel = $('.sql-editor'),
        loadingDiv = $('#fetching_data'),
        msgDiv = loadingDiv.find('.sql-editor-busy-text');

    // Register unload event on window close.
    window.onbeforeunload = function(ev) {
      $.ajax({
        url: "{{ url_for('datagrid.index') }}" + "close/" + {{ uniqueId }},
        method: 'GET'
      });
    };

    // Get the controller object from pgAdmin.SqlEditor
    var sqlEditorController = pgAdmin.SqlEditor.create(editorPanel);

    // Listen on events to show/hide loading-icon and change messages.
    sqlEditorController.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
      msgDiv.text(msg);
      }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
        loadingDiv.removeClass('hide');
        msgDiv.text(msg);
        }).on('pgadmin-sqleditor:loading-icon:hide', function() {
          if (!loadingDiv.hasClass('hide')) {
          loadingDiv.addClass('hide');
          }
          });

    // Fetch the SQL for Scripts (eg: CREATE/UPDATE/DELETE/SELECT)
    var script_sql = '';
{% if script_type_url%}
    // Call AJAX only if script type url is present
    $.ajax({
      url: '{{ script_type_url }}',
      type:'GET',
      async: false,
      success: function(res) {
        script_sql = res;
      },
      error: function(jqx) {
        var msg = jqx.responseText;
        /* Error from the server */
        if (jqx.status == 410 || jqx.status == 500) {
          try {
            var data = $.parseJSON(jqx.responseText);
            msg = data.errormsg;
          } catch (e) {}
        }
        pgBrowser.report_error(
          S('{{ _('Error fetching SQL for script: "%s"') }}')
          .sprintf(msg)
          .value(), msg
        );
      }
    });
{% endif %}

    // Start the query tool.
    sqlEditorController.start({{ is_query_tool }}, "{{ editor_title }}",
                    script_sql, {{ is_new_browser_tab }}, "{{ server_type }}", {{ prompt_save_changes }});
});
{% endblock %}
