{% 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;}
    {% endif %}
</style>
<div id="main-editor_panel">
    <div id="fetching_data" class="sql-editor-busy-fetching hide">
        <span class="sql-editor-busy-icon"><img
                src="{{ url_for('browser.static', filename='css/aciTree/image/load-root.gif') }}"></span>
        <span class="sql-editor-busy-text"></span>
    </div>
    <div class="sql-editor" data-trans-id="{{ uniqueId }}">
        <div id="btn-toolbar" class="pg-prop-btn-group" 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') }}">
                    <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>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-copy-row" type="button" class="btn btn-default" title="{{ _('Copy Row') }}" disabled>
                    <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>
                    <i class="fa fa-clipboard" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-add-row" type="button" class="btn btn-default" title="{{ _('Add New Row') }}" disabled>
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-filter" type="button" class="btn btn-default" title="{{ _('Filter') }}" disabled>
                    <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-remove-filter" href="#">{{ _('Remove') }}</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>
                    <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 (Ctrl+Shift+E)') }}">
                    <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">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu">
                    <li>
                        <a id="btn-explain" href="#">
                            <span>{{ _('Explain (Ctrl+Shift+X)') }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-explain-analyze" href="#">
                            <span>{{ _('Explain analyze (Ctrl+Shift+A)') }}</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>
                    <i class="fa fa-stop" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-edit" type="button" class="btn btn-default" title="{{ _('Edit') }}">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                </button>
                <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu">
                    <li>
                        <a id="btn-clear" href="#">
                            <i class="fa fa-eraser" aria-hidden="true"></i>
                            <span> {{ _('Clear query window') }} </span>
                        </a>
                        <a id="btn-clear-history" href="#">
                            <i class="fa fa-eraser" aria-hidden="true"></i>
                            <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') }}">
                    <i class="fa fa-download" aria-hidden="true"></i>
                </button>
            </div>
        </div>
        <div class="editor-title"></div>
        <div id="filter" class="filter-container hidden">
            <div class="filter-title">Filter</div>
            <div class="sql-textarea">
                <textarea id="sql_filter" row="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>
    </div>
</div>
{% endblock %}

{% block init_script %}
try {
require(
['jquery', 'pgadmin', 'pgadmin.sqleditor'],
function($, pgAdmin) {

var editorPanel = $('.sql-editor'),
loadingDiv = $('#fetching_data'),
msgDiv = loadingDiv.find('.sql-editor-busy-text');

// 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);
});
} catch (err) {
/* Show proper error dialog */
console.log(err);
}
{% endblock %}