{% extends 'OmniDB_app/base.html' %}

{% block header_menu %}
<li><a id="menu_connections" onclick="startConnectionManagement()">Connections</a></li>
{% endblock %}

{% block header_actions %}
{% endblock %}

{% block content %}
	<div class="conn_tabs">
		<div id="conn_tabs" style='/*margin-left: 5px; margin-right: 5px;*/'>
			<ul>
			</ul>
		</div>
	</div>

    <div id="div_column_selection" class="isModal">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 50%; height: 40%; left: 25%; top: 30%;">
                <a class="modal-closer" onclick="hideColumnSelection()">x</a>

                <div style="margin: 30px; position: absolute; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">

                <select id="sel_columns_left" ondblclick="addColumnToList()" style="width: 200px; height: 100%" size="10">
                	<option value="1">Column 1</option>
                	<option value="1">Column 2</option>
                	<option value="1">Column 3</option>
                	<option value="1">Column 4</option>
                </select>

                <div style="display: inline-block; vertical-align: top; width: 80px; position: absolute; left: 50%; margin-left: -40px;">

                	<div><button onclick="addColumnToList()"   style="width: 100%; margin-bottom: 10px;">Add</button></div>
                	<div><button onclick="remColumnFromList()" style="width: 100%;">Remove</button></div>

                </div>

                <select id="sel_columns_right" ondblclick="remColumnFromList()" style="width: 200px; height: 100%; position: absolute; right: 0px;" size="10">
                	<option value="1">Column 5</option>
                	<option value="1">Column 6</option>
                	<option value="1">Column 7</option>
                	<option value="1">Column 8</option>
                </select>
							</div>
            </div>
        </div>
    </div>

		<div id="div_commands_log" class="isModal">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%;">
                <a class="modal-closer" onclick="hideCommandsLog()">x</a>

                <div style="height: 100%;">
	                <div id="div_commands_log_list" style="margin: 20px; height: 90%; overflow: scroll; user-select: text;">
	                </div>
                </div>
            </div>
        </div>
    </div>

		<div id="connection_list_div" class="isModal modal_background_dark">
			<div class='connection_list'><a class='modal-closer' onclick='closeConnectionList()'>x</a>
				<div style='display:inline-block;'>
					<button onclick="newConnection()">New Connection</button>
				</div>
				<div id='div_save' style='visibility: hidden; display:inline-block;'>
					<button onclick="saveConnections()">Save Data</button>
				</div>
				<div style='display:inline-block;'>
					Groups:
					<select id="group_selector" onchange="groupChange(this.value)">
						<option value=-1>Select group</option>
						<option>Group 1</option>
					</select>
				</div>
				<div id='div_show_group' style='display:inline-block;'>
					<button id='bt_groups' onclick="newGroup()">New Group</button>
				</div>
				<div id='div_edit_group' style='display:none;'>
					<button id='bt_groups' onclick="editGroup()">Edit Group</button>
				</div>
				<div id='div_delete_group' style='display:none;'>
					<button id='bt_groups' class="bt_red" onclick="deleteGroup()">Delete Group</button>
				</div>
				<div id='connection_list_div_grid'></div>
			</div>
		</div>

{% endblock %}
{% block include_css %}
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/lib/aimaraJS/css/Aimara.css?v2.17.0.0"           />
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/chartist.min.css?v2.17.0.0"                  />
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/jquery-ui.min.css?v2.17.0.0"                 />
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/jquery-ui.structure.min.css?v2.17.0.0"       />
	<!--<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/lib/popupJS/popupJS.css?v2.17.0.0"               />-->
	<!--<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/lib/emojionearea/emojionearea.min.css?v2.17.0.0" />-->
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/node-icon.css?v2.17.0.0"                    />
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/grid-icon.css?v2.17.0.0"                    />
	<link rel="stylesheet" type="text/css" href="{{url_folder}}/static/OmniDB_app/css/interface-icon.css?v2.17.0.0"                    />
{% endblock %}
{% block include %}
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/cytoscape/cytoscape.min.js?v2.17.0.0"                         ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/cytoscape/cytoscape-spread.js?v2.17.0.0"                      ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Chart.bundle.js?v2.17.0.0"                                 ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/chartist.min.js?v2.17.0.0"                                     ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/chartist-plugin-axistitle.min.js?v2.17.0.0"                    ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/aimaraJS/lib/Aimara.js?v2.17.0.0"                             ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/QueryClient.js?v2.17.0.0"                                      ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Query.js?v2.17.0.0"                                            ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/advancedObjectSearch.js?v2.17.0.0"                                       ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Debug.js?v2.17.0.0"                                            ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Workspace.js?v2.17.0.0"	      	                            ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/EditData.js?v2.17.0.0"				                            ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/AlterTable.js?v2.17.0.0"			                            ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/CreateTabFunctions.js?v2.17.0.0"                               ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Tree.js?v2.17.0.0"                                             ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreeSnippets.js?v2.17.0.0"                                     ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreeMonitor.js?v2.17.0.0"                                      ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreePostgresql.js?v2.17.0.0"                                   ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreeOracle.js?v2.17.0.0"                                       ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreeMariadb.js?v2.17.0.0"                                      ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/TreeMysql.js?v2.17.0.0"                                        ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/CommandHistory.js?v2.17.0.0"                                   ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/MonitorDashboard.js?v2.17.0.0"                                 ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Connections.js?v2.17.0.0"                                      ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/jquery-ui.min.js?v2.17.0.0"                                    ></script>
<!--<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/popupJS/popupJS.js?v2.17.0.0"                                 ></script>-->
<!--<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/lib/emojionearea/emojionearea.min.js?v2.17.0.0"                   ></script>-->
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Properties.js?v2.17.0.0"                                       ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Shortcuts.js?v2.17.0.0"                                        ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Console.js?v2.17.0.0"                                          ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Terminal.js?v2.17.0.0"                                         ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/CustomMenu.js?v2.17.0.0"                                       ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/PluginHook.js?v2.17.0.0"                                       ></script>
<script type="text/javascript" src="{{url_folder}}/static/OmniDB_app/js/Autocomplete.js?v2.17.0.0"                                     ></script>

<script>
	var v_query_port = {{ query_port }};
	var v_query_port_external = {{ query_port_external }};
	var v_is_secure = {{ is_secure }};
	var v_dev_mode = {{ dev_mode }};
	var v_keybind_object = { v_autocomplete: '{{ autocomplete }}',
 							 v_autocomplete_mac: '{{ autocomplete_mac }}' };
							 //Global variables
	var v_connections_data;
	var gv_chatWebSocketPort = v_query_port;
	var gv_chatAttachmentPath = '{{ chat_link }}';
	var gv_desktopMode = ('{{ desktop_mode }}' == 'True');
	var v_tab_token = '{{ tab_token }}';
	var v_show_terminal_option = {{ show_terminal_option }};
</script>
{% endblock %}
