<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="utf-8">
		<title>OpenRPA</title>
		<link rel="stylesheet" type="text/css" href="3rdParty/Semantic-UI-CSS-master/semantic.min.css">
		<script
		  src="3rdParty/jQuery/jquery-3.1.1.min.js"
		  crossorigin="anonymous"></script>
		<script src="3rdParty/Semantic-UI-CSS-master/semantic.min.js"></script>
		  <script>
		  var mGlobal={}
		  $(document)
			.ready(function() {
				mGlobal.GUIElement={}
				mGlobal.GenerateUniqueID=function(inPrefix="ID") {
					return inPrefix+Math.round(Math.random()*1000)+"-"+Math.round(Math.random()*10000)+"-"+Math.round(Math.random()*1000)
				}
				///Инициализация
				mGlobal.ElementTree={}
				mGlobal.Actions={}
				mGlobal.ActionSpecificationList = []
				
				mGlobal.CodeList={}
				
				mGlobal.ClipboardSet=function(lText) {
					const el = document.createElement('textarea');
					el.value = lText;
					document.body.appendChild(el);
					el.select();
					document.execCommand('copy');
					document.body.removeChild(el);
				};
				///Функция запуска поиска по окну
				mGlobal.Actions.fAutomationSearchMouseElementHierarchyRun= function(inElementId)
				{
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"AutomationSearchMouseElementHierarchy","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
					  success: 
						function(lData,l2,l3)
						{
							var lResponseJSON=JSON.parse(lData)
							///Очистить дерево
							mGlobal.ElementTree.fClear();
							///Прогрузить новое дерево
							mGlobal.ElementTree.fRender(lResponseJSON.outputObject);
						},
					  dataType: "text"
					});
				}
				
				//Функция очистки объектов интерфейса
				mGlobal.ElementTree.fClear=function()
				{
					///Очистить HTML код
					$(".rpa-object-tree").html("");
				}
				
				///Функция визуализации дерева
				mGlobal.ElementTree.fRender = function(inElementsTreeDataArray)
				{
					var lHTMLList='<div class="ui list" style="height:350px;overflow:scroll;">';
					///Циклический обход списка
					for (var i = 0; i< inElementsTreeDataArray.length;i++) {
						///Добавить HTML код позиции
						lHTMLList+=mGlobal.ElementTree.fItemGenerateHTML_JS(inElementsTreeDataArray[i])
					}
					///Закрывающая список HTML
					lHTMLList+="</div>"
					///Установить HTML код в родителя
					$(".rpa-object-tree").html(lHTMLList);
					
				}
				///Функция визуализации дерева
				///Вызов создания вложенного листа, если имеется атрибут SpecificationChild
				mGlobal.ElementTree.fItemGenerateHTML_JS = function(inItem,inParentSpecification=[]){
					///Генерация уникального кода для элемента
					var lElementId = mGlobal.GenerateUniqueID()
					//Добавить информацию об элементе в словарь JS
					///Урезанная часть селектора (сделать, чтобы была без SpecificationChild)
					var lSelectorLocal={};
					Object.assign(lSelectorLocal,inItem);
					delete lSelectorLocal.SpecificationChild;
					
					
					///Установка данных JS
					mGlobal.GUIElement[lElementId]={};
					mGlobal.GUIElement[lElementId]['GUISelectorLocal']=lSelectorLocal
					mGlobal.GUIElement[lElementId]['GUISelectorFull']=Array.from(inParentSpecification);
					mGlobal.GUIElement[lElementId]['GUISelectorFull'].push(lSelectorLocal)	
					
					///Генерация кода HTML
					var lResultString="";
					var lSubItemActionOnClick=' onclick="mGlobal.TreeLoadSubTree(\''+lElementId+'\');" '
					var lSubItemActionOnRightClick=' oncontextmenu="mGlobal.ElementHighlightNew(\''+lElementId+'\');" '
					var lIconSelectOnClick=' onclick="mGlobal.TreeObjectInfoLoad(\''+lElementId+'\');" '
					var lIconTestOnClick=' onclick="mGlobal.Test(\''+lElementId+'\');" '
					var lIconUpOnClick=' onclick="mGlobal.Actions.fAutomationSearchMouseElementHierarchyRun(\''+lElementId+'\');" '
							
					var lSubListHTML="";
					///Проверка вложенных объектов SpecificationChild
					if (Array.isArray(inItem.SpecificationChild)) {
						if (inItem.SpecificationChild.length>0) {
							var lSubListHTML='<div class="ui list">';
							for (var i=0;i<inItem.SpecificationChild.length;i++) {
								if (inItem.SpecificationChild[i] != null) {
									///Генерация кода 
									lSubListHTML+=mGlobal.ElementTree.fItemGenerateHTML_JS(inItem.SpecificationChild[i],mGlobal.GUIElement[lElementId]['GUISelectorFull'])
								}
							}
							lSubListHTML+="</div>"
						}
					}
					///Генерация кода текущего элемента
					lResultString+='\
						<div class="item" id="'+lElementId+'">\
							<i class="folder icon"></i>\
							<i class="angle double right icon" '+lIconSelectOnClick+'></i>\
							<i class="angle double right icon" '+lIconTestOnClick+'></i>\
							<i class="angle double up icon" '+lIconUpOnClick+'></i>\
							<div class="content">\
								<div class="header" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>'+inItem.title+'</div>\
								<div class="description" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>process_id:'+inItem.process_id+'; handle:'+inItem.handle+'; class_name: '+inItem.class_name+'; RECT:L'+inItem.rectangle.left+' T'+inItem.rectangle.top+' R'+inItem.rectangle.right+' B'+inItem.rectangle.bottom+'</div>\
							'+lSubListHTML+'\
							</div>\
						</div>'
					return lResultString;					
				}
				
				mGlobal.TreeLoadSubTree =function (inElementId) {
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementGetChildElementList","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
					  success: 
						function(lData,l2,l3)
						{
							var lHTMLTree='<div class="ui list">'
							var lResponseJSON=JSON.parse(lData)
							for (i=0;i<lResponseJSON.outputObject.length;i++) {
								var lElementId = mGlobal.GenerateUniqueID()
								var lSubItemHandleId=lResponseJSON.outputObject[i].handle;
								var lSubItemActionOnClick=' onclick="mGlobal.TreeLoadSubTree(\''+lElementId+'\');" '
								var lSubItemActionOnRightClick=' oncontextmenu="mGlobal.ElementHighlightNew(\''+lElementId+'\');" '
								var lIconSelectOnClick=' onclick="mGlobal.TreeObjectInfoLoad(\''+lElementId+'\');" '
								var lIconTestOnClick=' onclick="mGlobal.Test(\''+lElementId+'\');" '
								var lIconUpOnClick=' onclick="mGlobal.Actions.fAutomationSearchMouseElementHierarchyRun(\''+lElementId+'\');" '
						
								lHTMLTree+='\
									<div class="item handle_'+lSubItemHandleId+'" handle_id="'+lSubItemHandleId+'" id="'+lElementId+'">\
										<i class="folder icon"></i>\
										<i class="angle double right icon" '+lIconSelectOnClick+'></i>\
										<i class="angle double right icon" '+lIconTestOnClick+'></i>\
										<i class="angle double up icon" '+lIconUpOnClick+'></i>\
										<div class="content">\
											<div class="header" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>'+lResponseJSON.outputObject[i].title+'</div>\
											<div class="description" '+lSubItemActionOnClick+lSubItemActionOnRightClick+'>process_id:'+lResponseJSON.outputObject[i].process_id+'; handle:'+lSubItemHandleId+'; class_name: '+lResponseJSON.outputObject[i].class_name+'; RECT:L'+lResponseJSON.outputObject[i].rectangle.left+' T'+lResponseJSON.outputObject[i].rectangle.top+' R'+lResponseJSON.outputObject[i].rectangle.right+' B'+lResponseJSON.outputObject[i].rectangle.bottom+'</div>\
										</div>\
									</div>'
								//Добавить информацию об элементе в словарь JS
								mGlobal.GUIElement[lElementId]={};
								mGlobal.GUIElement[lElementId]['GUISelectorLocal']=lResponseJSON.outputObject[i]
								mGlobal.GUIElement[lElementId]['GUISelectorFull']=Array.from(lSpecificationArray);
								mGlobal.GUIElement[lElementId]['GUISelectorFull'].push(lResponseJSON.outputObject[i])
							}
							lHTMLTree+='</div>'
							$("#"+inElementId+" .content").append(lHTMLTree)
						},
					  dataType: "text"
					});
				}
				mGlobal.TreeObjectInfoLoad =function (inElementId) {
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					var lHTMLList='<div class="ui relaxed divided list" style="height:350px;overflow:scroll;">'
					var lSpecificationArrayNew=[]
					for (i=0;i<lSpecificationArray.length;i++) {
						lSpecificationArrayNew.push(lSpecificationArray[i])
						var lElementId = mGlobal.GenerateUniqueID()
						var lOnClickSelect= ' onclick="mGlobal.ElementPropertyListLoad(\''+lElementId+'\');" '
						lHTMLList+='\
							<div class="item" id="'+lElementId+'" '+lOnClickSelect+'>\
								<div class="content">\
									<div class="description"><p style="word-wrap: break-word;"><b>Level  '+i+': </b> '+JSON.stringify(lSpecificationArray[i])+'</p></div>\
								</div>\
							</div>'
						mGlobal.GUIElement[lElementId]={};
						mGlobal.GUIElement[lElementId]['GUISelectorLocal']=lSpecificationArray[i]
						mGlobal.GUIElement[lElementId]['GUISelectorFull']=Array.from(lSpecificationArrayNew);
					}
					lHTMLList+='</div>'
					$(".rpa-hierarchy").html(lHTMLList)
					$(".rpa-object-tree .item").css("background-color","");
					$("#"+inElementId).css("background-color","RGB(128,128,128)");
					///Создать урезанную версию селектора
					lTextAreaSpecificationArray=Array.from(lSpecificationArray);
					for (var i = 0; i< lTextAreaSpecificationArray.length; i++) {
						Object.assign(lTextAreaSpecificationArray[i],lTextAreaSpecificationArray[i]);
						///Очистить ненужные ключи для выборки
						delete lTextAreaSpecificationArray[i]['rich_text']
						delete lTextAreaSpecificationArray[i]['process_id']
						delete lTextAreaSpecificationArray[i]['rectangle']
						delete lTextAreaSpecificationArray[i]['control_id']
						delete lTextAreaSpecificationArray[i]['process']
						delete lTextAreaSpecificationArray[i]['name']
						delete lTextAreaSpecificationArray[i]['handle']
						delete lTextAreaSpecificationArray[i]['control_type']
						delete lTextAreaSpecificationArray[i]['runtime_id']
						if (i!=0) {
							delete lTextAreaSpecificationArray[i]['title']
							delete lTextAreaSpecificationArray[i]['class_name']
						}
					}
					$(".rpa-gui-selector")[0].value=(JSON.stringify(lTextAreaSpecificationArray))
				}
				mGlobal.ElementPropertyListLoad=function(inElementId) {
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementRunAction","argsArray":['+JSON.stringify(lSpecificationArray)+',"get_properties"]}',
					  success: 
						function(lData,l2,l3)
						{
							var lHTMLList='<div class="ui relaxed divided list">'
							var lJSONData = JSON.parse(lData).outputObject
							var lSpecificationArray=Object.keys(lJSONData)
							for (i=0;i<lSpecificationArray.length;i++) {
								var lItemKey = lSpecificationArray[i]
								var lItemValue = lJSONData[lItemKey]
								lHTMLList+='\
									<div class="item">\
										<div class="content">\
											<div class="description"><p style="word-wrap: break-word;"><b> '+lItemKey+':</b> '+JSON.stringify(lItemValue)+'</p></div>\
										</div>\
									</div>'
							}
							lHTMLList+='</div>'
							$(".rpa-property-list").html(lHTMLList)
							
						},
					  dataType: "text"
					});
				}
				mGlobal.ElementHighlight =function (inHandleId) {
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementRunAction","argsArray":[[{"handle":'+inHandleId+'}],"draw_outline"]}',
					  success: 
						function(lData,l2,l3)
						{
							console.log('Success handle:'+inHandleId)
						},
					  dataType: "text"
					});
				}
				mGlobal.ElementHighlightNew =function (inElementId) {
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementDrawOutlineNew","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
					  success: 
						function(lData,l2,l3)
						{
							lDataJSON=JSON.parse(lData);
							if (lDataJSON.hasOwnProperty("Error")) {
								mGlobal.ShowModal("GUI Error",lDataJSON.Error);
							}
						},
					  dataType: "text"
					});
				}
				mGlobal.ElementHighlightNewGUISelectorString =function (inGUISelector) {
					//Подгрузка массива спецификаций
					lSpecificationArray = inGUISelector
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementDrawOutlineNewFocus","argsArray":['+lSpecificationArray+']}',
					  success: 
						function(lData,l2,l3)
						{
							lDataJSON=JSON.parse(lData);
							if (lDataJSON.hasOwnProperty("Error")) {
								mGlobal.ShowModal("GUI Error",lDataJSON.Error);
							}
						},
					  dataType: "text"
					});
				}
				mGlobal.ElementValidateGUISelectorString =function (inGUISelector) {
					//Подгрузка массива спецификаций
					lSpecificationArray = inGUISelector
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"PywinautoExtElementsGetInfo","argsArray":['+lSpecificationArray+']}',
					  success: 
						function(lData,l2,l3)
						{	
							lDataJSON=JSON.parse(lData);
							if (Array.isArray(lDataJSON.outputObject)) {
								lHTMLData=""
								for (i=0;i<lDataJSON.outputObject.length;i++) {
									lHTMLData+='<p>'+
										JSON.stringify(lDataJSON.outputObject[i])+
										'</p>'
								}
								$(".openrpa-validate-result").html(lHTMLData)
							}
							if (lDataJSON.hasOwnProperty("Error")) {
								mGlobal.ShowModal("GUI Error",lDataJSON.Error);
							}
						},
					  dataType: "text"
					});
				}
				mGlobal.Test = function (inElementId) {
					//Подгрузка массива спецификаций
					lSpecificationArray = mGlobal.GUIElement[inElementId].GUISelectorFull
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementActionGetList","argsArray":['+JSON.stringify(lSpecificationArray)+']}',
					  success: 
						function(lData,l2,l3)
						{
							//lDataJSON=JSON.parse(lData.outputObject);
							lDataJSON=JSON.parse(lData)
							var lDataKeyList=lDataJSON.outputObject
							var lValueList=[]
							for (var i = 0; i< lDataKeyList.length;i++) {
								if (lDataKeyList[i].length>0)
									if (lDataKeyList[i][0]!="_")
										lValueList.push({'name':lDataKeyList[i],'value':lDataKeyList[i]})
							}
							///Установка значений в dropdown
							$('.ui.dropdown.gui-action')
							  .dropdown({
								values: lValueList
							  })
							;
						},
					  dataType: "text"
					});
				}
				///Выполнить действие
				mGlobal.GUIActionLoadList = function () {
					var lActionElementSpecification = $('.rpa-gui-selector')[0].value
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementActionGetList","argsArray":['+lActionElementSpecification+']}',
					  success: 
						function(lData,l2,l3)
						{
							//lDataJSON=JSON.parse(lData.outputObject);
							lDataJSON=JSON.parse(lData)
							var lDataKeyList=lDataJSON.outputObject
							var lValueList=[]
							for (var i = 0; i< lDataKeyList.length;i++) {
								if (lDataKeyList[i].length>0)
									if (lDataKeyList[i][0]!="_")
										lValueList.push({'name':lDataKeyList[i],'value':lDataKeyList[i]})
							}
							///Установка значений в dropdown
							$('.ui.dropdown.gui-action')
							  .dropdown({
								values: lValueList
							  })
							;
						},
					  dataType: "text"
					});
				}
				///Добавить действие в список на исполнение
				mGlobal.GUIActionAddToList= function() {
					var lActionName =$('.dropdown.gui-action .selected')[0].attributes['data-value'].value
					var lActionElementSpecification = $('.rpa-gui-selector')[0].value
					var lActionArgumentList = $('.rpa-argument-list')[0].value
					if (lActionArgumentList=="") lActionArgumentList="[]"
					///Сформировать строку спецификации действия
					lActionSpecificationObject = {"functionName":"ElementRunAction","argsArray":[JSON.parse(lActionElementSpecification),lActionName,JSON.parse(lActionArgumentList)]}
					lActionSpecificationString = '{"functionName":"ElementRunAction","argsArray":['+lActionElementSpecification+',"'+lActionName+'",'+lActionArgumentList+']}'
					///Добавить в массив действий
					mGlobal.ActionSpecificationList.push(lActionSpecificationObject)
					///Обновить визуализацию
					mGlobal.CodeList.fRender()
				
				}
				///Добавить действие ожидания в список на исполнение
				mGlobal.GUIActionWaitAddToList = function() {
					var lActionElementSpecification = $('.rpa-gui-selector')[0].value
					var lActionArgumentList = $('.rpa-argument-list')[0].value
					if (lActionArgumentList=="") lActionArgumentList="[]"
					///Сформировать строку спецификации действия
					lActionSpecificationObject = {"functionName":"PywinautoExtElementWaitAppear","argsArray":[JSON.parse(lActionElementSpecification)]}
					lActionSpecificationString = '{"functionName":"PywinautoExtElementWaitAppear","argsArray":['+lActionElementSpecification+']}'
					///Добавить в массив действий
					mGlobal.ActionSpecificationList.push(lActionSpecificationObject)
					///Обновить визуализацию
					mGlobal.CodeList.fRender()
				}
				///Добавить действие сон 2 секунды в список на исполнение
				mGlobal.GUIActionSleep2sAddToList = function() {
					///Сформировать строку спецификации действия
					lActionSpecificationObject = {"functionName":"GeneralSleep2s","argsArray":[]}
					lActionSpecificationString = '{"functionName":"GeneralSleep2s","argsArray":[]}'
					///Добавить в массив действий
					mGlobal.ActionSpecificationList.push(lActionSpecificationObject)
					///Обновить визуализацию
					mGlobal.CodeList.fRender()
				
				}
				///Выполнить список действий
				mGlobal.GUICodeListRun = function () {
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIActionList',
					  data: JSON.stringify(mGlobal.ActionSpecificationList),
					  success: 
						function(lData,l2,l3)
						{
							lDataJSON=JSON.parse(lData)
							$(".gui-code-list-run-result").html(lDataJSON.outputObject)
							
						},
					  dataType: "text"
					});
				}
				///////////////////
				///CodeList
				///////////////////
				///Визуализация текущего списка
				mGlobal.CodeList.fRender=function() {
					///Сформировать текстовые данные для вывода
					var lHTMLData = ""
					for (var i = 0; i< mGlobal.ActionSpecificationList.length;i++) {
						lHTMLData+='<p>'+
							JSON.stringify(mGlobal.ActionSpecificationList[i])+
							'</p>'
					}
					$(".gui-code-result").html(lHTMLData)
				}		
				///Выполнить импорт спецификации из JSON
				mGlobal.CodeList.fActionSpecificationImportFromJSON=function() {
					mGlobal.ActionSpecificationList=JSON.parse($(".ui.modal.openrpa-code-list-gui-import-modal textarea")[0].value)
					///Обновить список на странице
					mGlobal.CodeList.fRender()
				}
				///Выполнить действие
				mGlobal.GUIActionRun = function () {
					var lActionName =$('.dropdown.gui-action .selected')[0].attributes['data-value'].value
					var lActionElementSpecification = $('.rpa-gui-selector')[0].value
					var lActionArgumentList = $('.rpa-argument-list')[0].value
					if (lActionArgumentList=="") lActionArgumentList="[]"
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementRunAction","argsArray":['+lActionElementSpecification+',"'+lActionName+'",'+lActionArgumentList+']}',
					  success: 
						function(lData,l2,l3)
						{
							lDataJSON=JSON.parse(lData)
							$(".gui-result").html(lDataJSON.outputObject)
							
						},
					  dataType: "text"
					});
				}
			  // fix main menu to page on passing
			  $('.main.menu').visibility({
				type: 'fixed'
			  });
			  $('.overlay').visibility({
				type: 'fixed',
				offset: 80
			  });

			  // lazy load images
			  $('.image').visibility({
				type: 'image',
				transition: 'vertical flip in',
				duration: 500
			  });

			  // show dropdown on hover
			  $('.main.menu  .ui.dropdown').dropdown({
				on: 'hover'
			  });

				mGlobal.GUIRefreshTree=function()
				{
					///Загрузка данных
					$.ajax({
					  type: "POST",
					  url: 'GUIAction',
					  data: '{"functionName":"ElementGetChildElementList","argsArray":[[]]}',
					  success: 
						function(lData,l2,l3)
						{
							var lResponseJSON=JSON.parse(lData)
							///Очистить дерево
							mGlobal.ElementTree.fClear();
							///Прогрузить новое дерево
							mGlobal.ElementTree.fRender(lResponseJSON.outputObject);
						},
					  dataType: "text"
					});
				
				}
				mGlobal.GUIRefreshTree();
				mGlobal.ShowModal=function(inHeaderText,inMessageText)
				{
					//Установка заголовка
					$('.ui.basic.modal div.header').html(inHeaderText);
					//Установка текста
					$('.ui.basic.modal div.content p').html(inMessageText);
					//Активация модального окна
					$('.ui.basic.modal').modal('show');
				}
			
			})
		  ;
		  </script>

		  <style type="text/css">

		  body {
			background-color: #FFFFFF;
		  }
		  .main.container {
			margin-top: 2em;
		  }

		  

		  .overlay {
			float: left;
			margin: 0em 3em 1em 0em;
		  }
		  .overlay .menu {
			position: relative;
			left: 0;
			transition: left 0.5s ease;
		  }

		  .main.menu.fixed {
			background-color: #FFFFFF;
			border: 1px solid #DDD;
			box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
		  }
		  .overlay.fixed .menu {
			left: 800px;
		  }

		  .text.container .left.floated.image {
			margin: 2em 2em 2em -4em;
		  }
		  .text.container .right.floated.image {
			margin: 2em -4em 2em 2em;
		  }

		  .ui.footer.segment {
			margin: 5em 0em 0em;
			padding: 5em 0em;
		  }
		  </style>
	</head>
	<body>
		<div class="ui internally celled grid">
			<div class="row black">
				<div class="two wide column">
					<h1 class="ui header inverted">OpenRPA</h1>
				</div>
				<div class="twelve wide column">
				</div>
				<div class="two wide column">
					<h5>by UnicodeLabs</h5>
				</div>
				
			</div>
			<div class="row">
				<div class="six wide column rpa-object-tree" >
					
				</div>
				<div class="six wide column rpa-hierarchy" >
					<p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
				</div>
				<div class="four wide column rpa-property-list" >

				</div>
			</div>
			<div class="row black">
				<div class="two wide column">
					<button class="ui button grey labeled icon mini" onclick="mGlobal.GUIRefreshTree()">
						<i class="up refresh icon"></i>
						Refresh tree
					</button>
				</div>
				<div class="two wide column">
					<button class="ui button grey labeled icon mini">
						<i class="up arrow icon"></i>
						From
					</button>
				</div>
				<div class="two wide column">
					<button class="ui button grey labeled icon mini">
						<i class="down arrow icon"></i>
						To
					</button>
				</div>
				<div class="ten wide column">
				</div>
				
			</div>
			<div class="row">
				<div class="eight wide column">
					<div class="ui tiny header">Edit GUI selector</div>
					<textarea style="width:100%; font-size:12pt" class="rpa-gui-selector" rows="6" cols="60"></textarea>
					<button class="large ui blue button rpa-action-highlight" onclick="mGlobal.ElementHighlightNewGUISelectorString($('.rpa-gui-selector')[0].value);">Highlight element</button>
					<button class="large ui grey button rpa-action-validate" onclick="mGlobal.ElementValidateGUISelectorString($('.rpa-gui-selector')[0].value);">Validate element</button>
					<div class="ui tiny header">Validate Result</div>
					<div class="content openrpa-validate-result divided list" style="overflow:scroll; height: 100px;"></div>
				</div>
				<div class="eight wide column">
					<div class="ui tiny header">Select action</div>
					<button class="ui button blue labeled icon" onclick="mGlobal.GUIActionLoadList();">
						<i class="right arrow icon"></i>
						Load actions
					</button>
					<div class="ui search selection dropdown gui-action" style="width:410px;">
						<input type="hidden" name="country">
						<i class="dropdown icon"></i>
						<div class="default text">Select action</div>
						<div class="menu">
						</div>
					</div>
					<div class="ui tiny header">Set arguments</div>
					<div class="ui input" style="width:500px;">
						<input type="text" placeholder="[GUAActionArg1, GUAActionArg2...]" class="rpa-argument-list">
					</div>
					<p></p>
					<button class="large ui green button" onclick="mGlobal.GUIActionRun();">Run action</button>
					<button class="large ui grey button" onclick="mGlobal.GUIActionAddToList();">+ Code list</button>
					<div class="ui tiny header">Result</div>
					<div class="content gui-result"></div>
				</div>
			</div>
			<div class="row black">
				<div class="sixteen wide column">
				</div>
			</div>
			<div class="row">
				<div class="eight wide column">
					<div class="ui tiny header">Additional actions</div>
					<div class="content gui-code-list-run-result"></div>
					<button class="large ui pink button" onclick="mGlobal.GUIActionWaitAddToList();">Wait element 60s: add to list</button>
					<button class="large ui pink button" onclick="mGlobal.GUIActionSleep2sAddToList();">Sleep 2s: add to list</button>
				</div>
				<div class="eight wide column">
					<div class="ui tiny header">Code list</div>
					<div class="content gui-code-result"></div>
					<button class="large ui green button" onclick="mGlobal.GUICodeListRun();">Run code list</button>
					<button class="large ui pink button" onclick="$('.ui.modal.openrpa-code-list-gui-import-modal textarea')[0].value=''; $('.ui.modal.openrpa-code-list-gui-import-modal').modal('show');">Import from JSON</button>
					<button class="large ui blue button openrpa-save-to-clipboard" onclick="mGlobal.ClipboardSet(JSON.stringify(mGlobal.ActionSpecificationList)); alert('Saved to clipboard!')">Export JSON to clipboard</button>
				</div>


			</div>
		</div>
		<div class="ui inverted vertical footer segment">
			<div class="ui center aligned container">
			  <div class="ui stackable inverted divided grid">
				<div class="three wide column">
				  <h4 class="ui inverted header">Pywinauto</h4>
				  <div class="ui inverted link list">
					<a href="https://pywinauto.readthedocs.io/en/latest/code/pywinauto.findwindows.html" class="item" target="_blank">Specification manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/code.html#main-user-modules" class="item" target="_blank">Classes manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/code.html#main-user-modules" class="item" target="_blank">How to use manual</a>
					<a href="https://pywinauto.readthedocs.io/en/latest/code/pywinauto.base_wrapper.html" class="item" target="_blank">Base wrapper manual</a>
				  </div>
				</div>
				<div class="three wide column">
				  <h4 class="ui inverted header">Semantic UI</h4>
				  <div class="ui inverted link list">
					<a href="https://semantic-ui.com/usage/theming.html" class="item" target="_blank">Color manual</a>
					<a href="https://semantic-ui.com/elements/input.html" class="item" target="_blank">Input manual</a>
					<a href="https://semantic-ui.com/elements/icon.html" class="item" target="_blank">Icon list</a>
					<a href="https://semantic-ui.com/elements/button.html" class="item" target="_blank">Button manual</a>
				  </div>
				</div>
				<div class="three wide column">
				  <h4 class="ui inverted header">GitLab</h4>
				  <div class="ui inverted link list">
					<a href="https://gitlab.com/UnicodeLabs/OpenRPA" class="item" target="_blank">OpenRPA repository</a>
					<a href="https://gitlab.com/UnicodeLabs" class="item" target="_blank">UnicodeLabs</a>
					<a href="#" class="item">Link -</a>
					<a href="#" class="item">Link -</a>
				  </div>
				</div>
				<div class="seven wide column">
				  <h4 class="ui inverted header">OpenRPA</h4>
				  <p>Open source Robotic Process Automation software by the Unicode Labs (Created by Ivan Maslov). Under the MIT license.</p>
				</div>
			  </div>
			  <div class="ui inverted section divider"></div>
			  <div class="ui horizontal inverted small divided link list">
				<a class="item" href="#">Site Map</a>
				<a class="item" href="#">Contact Us</a>
				<a class="item" href="#">Terms and Conditions</a>
				<a class="item" href="#">Privacy Policy</a>
			  </div>
			</div>
		</div>
		<div class="ui basic modal">
			<div class="ui icon header">
			</div>
			<div class="content">
				<p>Here is the message text!</p>
			</div>
			<div class="actions">
				<div class="ui red basic cancel inverted button">
					<i class="remove icon"></i>
					No
				</div>
				<div class="ui green ok inverted button">
					<i class="checkmark icon"></i>
					Yes
				</div>
			</div>
		</div>
		
		
		<div class="ui modal openrpa-code-list-gui-import-modal">
			<i class="close icon"></i>
			<div class="header">
			Code list import
			</div>
			<div class="content">
				<div class="description">
					<div class="ui header">Insert your JSON specification here.</div>
					<p><textarea style="width:100%" rows="6" cols="60"></textarea></p>
				</div>
			</div>
			<div class="actions">
				<div class="ui black deny button">
					Cancel
				</div>
				<div class="ui positive right labeled icon button" onclick="mGlobal.CodeList.fActionSpecificationImportFromJSON();">
					Parse
					<i class="checkmark icon"></i>
				</div>
			</div>
		</div>
	</body>
</html>