<head>
<style>
.tool_label {
  display: inline-block;
  padding: 0.6rem 0rem;
}
</style>
</head>

<div id="tool_label" class="tool_label">
	<span>
	&nbsp;&nbsp;<%:Current Config File%>:&nbsp;
	<select id="cfg_name">
	</select>&nbsp;&nbsp;
	<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Switch Config%>" onclick="return switch_config(this)" />
	&nbsp;
	</span>
</div>

<script type="text/javascript">//<![CDATA[

		var config_name = document.getElementById('cfg_name');
		var tool_label = document.getElementById('tool_label');
		var Commit = document.getElementById('cbi-table-1-Commit');
		var Apply = document.getElementById('cbi-table-1-Apply');
		var Back = document.getElementById('cbi-table-1-Back');
		var Load_Config = document.getElementById('cbi-table-1-Load_Config');
		var Delete_Unused_Servers = document.getElementById('cbi-table-1-Delete_Unused_Servers');
		var Delete_Servers = document.getElementById('cbi-table-1-Delete_Servers');
		var Delete_Proxy_Provider = document.getElementById('cbi-table-1-Delete_Proxy_Provider');
		var Delete_Groups = document.getElementById('cbi-table-1-Delete_Groups');
		var rule_mg = document.getElementById('cbi-table-1-rule_mg');
		var pro_mg = document.getElementById('cbi-table-1-pro_mg');
    
		setTimeout("get_header()",100);
		
		if (Commit) {
			Commit.style.textAlign="center";
		}
		if (Apply) {
			Apply.style.textAlign="center";
		}
		if (Back) {
			Back.style.textAlign="center";
		}
		if (Load_Config) {
			Load_Config.style.textAlign="center";
			Delete_Unused_Servers.style.textAlign="center";
			Delete_Servers.style.textAlign="center";
			Delete_Proxy_Provider.style.textAlign="center";
			Delete_Groups.style.textAlign="center";
		}
		if (rule_mg) {
    		rule_mg.style.textAlign="center";
    		pro_mg.style.textAlign="center";
		}

		if (tool_label.style.display != "none") {
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "config_name")%>', null, function(x, status) {
				if (x && x.status == 200 && status.config_name != "") {
					for(var i in status.config_name){
     	 	  			config_name.options.add(new Option(status.config_name[i].name,status.config_name[i].name));
    				}
    				if (status.config_path != "") {
    					config_name.value = status.config_path;
    				}
    			else
    			{
    				config_name.options.add(new Option("<%:Not Select%>",""));
    				config_name.value = "";
    			}
				}
				else if (x && x.status == 200 && status.config_path != "") {
					config_name.options.add(new Option(status.config_path,status.config_path));
					config_name.value = status.config_path;
				}
				else {
					tool_label.style.display = "none";
				}
			});
		};
	
	function get_header() {
		var header = document.getElementsByClassName("tabmenu-item-log ")[0];
		if (header) {
			insertAfter(tool_label,header);
		}
		else {
			setTimeout("get_header()",100);
		}
	}
		
	function insertAfter(newElement, targetElement) {
		var parent = targetElement.parentNode;
		if (parent.lastChild == targetElement) {
			parent.appendChild(newElement, targetElement); 
		}
		else {
			parent.insertBefore(newElement, targetElement.nextSibling);
		};
	};
	
	function switch_config(btn)
	{
		if (config_name.value && config_name.value != "") {
			btn.disabled = true;
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "switch_config")%>', {config_name: config_name.value}, function(x, status) {
				if (x && x.status == 200) {
					btn.disabled = false;
					alert(' <%:Config File%>: ' + config_name.value + ' <%:switching succeeded!%>')
					window.location.href=location.pathname;
				}
				else {
					alert(' <%:Config File%>: ' + config_name.value + ' <%:switching failed!%>')
				}
			});
			return false;
		}
	}
	
	function winOpen(url)
	{
		var winOpen = window.open(url);
		if(winOpen == null || typeof(winOpen) == 'undefined'){
			window.location.href=url;
		}
	}
//]]></script>