<style type="text/css">
	#dialog_reslov {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		display: none;
		z-index: 20000;
	}

	#dialog_reslov .dialog_box {
		position: relative;
		background: rgba(255, 255, 255);
		top: 10%;
		width: 50%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		height:auto;
		align-items: center;
	}

	#dialog_reslov .dialog_line {
		margin-top: .5em;
		margin-bottom: .5em;
		margin-left: 2em;
		margin-right: 2em;
	}

	#dialog_reslov .dialog_box>h4,
	#dialog_reslov .dialog_box>p,
	#dialog_reslov .dialog_box>div {
		flex-basis: 100%;
	}

	#dialog_reslov .dialog_box>img {
		margin-right: 1em;
		flex-basis: 32px;
	}

	body.dialog-reslov-active {
		overflow: hidden;
		height: 100vh;
	}

	body.dialog-reslov-active #dialog_reslov {
		display: block;
	}
</style>

<script type="text/javascript">
	function close_reslov_dialog() {
		document.body.classList.remove('dialog-reslov-active')
		document.documentElement.style.overflowY = 'scroll'
	}

	function reslov_container() {
		let s = document.getElementById('cmd-line-status')

		if (!s)
			return

		let cmd_line = document.getElementById("dialog_reslov_text").value;
		if (cmd_line == null || cmd_line == "") {
			return
		}

		cmd_line = cmd_line.replace(/(^\s*)/g,"")
		if (!cmd_line.match(/^docker\s+(run|create)/)) {
			s.innerHTML = "<font color='red'><%:Command line Error%></font>"
			return
		}

		let reg_space = /\s+/g
		let reg_muti_line= /\\\s*\n/g
		//   reg_rem =/(?<!\\)`#.+(?<!\\)`/g  // the command has `# `
		let reg_rem =/`#.+`/g// the command has `# `
		cmd_line = cmd_line.replace(/^docker\s+(run|create)/,"DOCKERCLI").replace(reg_rem, " ").replace(reg_muti_line, " ").replace(reg_space, " ")
		console.log(cmd_line)
		window.location.href = '<%=luci.dispatcher.build_url("admin/docker/newcontainer")%>/' + encodeURI(cmd_line)
	}

	function clear_text(){
		let s = document.getElementById('cmd-line-status')
		s.innerHTML = ""
	}

	function show_reslov_dialog() {
		document.getElementById('dialog_reslov') || document.body.insertAdjacentHTML("beforeend", '<div id="dialog_reslov"><div class="dialog_box"><div class="dialog_line"></div><div class="dialog_line"><span><%:Plese input <docker create/run> command line:%></span><br /><span id="cmd-line-status"></span></div><div class="dialog_line"><textarea class="cbi-input-textarea" id="dialog_reslov_text" style="width: 100%; height:100%;" rows="15" onkeyup="clear_text()"></textarea></div><div class="dialog_line" style="text-align: right;"><input type="button" class="btn cbi-button cbi-button-apply" type="submit" value="<%:Submit%>" onclick="reslov_container()" /> <input type="button" class="btn cbi-button cbi-button-reset" type="reset" value="<%:Cancel%>" onclick="close_reslov_dialog()" /></div><div class="dialog_line"></div></div></div>')
		document.body.classList.add('dialog-reslov-active')
		let s = document.getElementById('cmd-line-status')
		s.innerHTML = ""
		document.documentElement.style.overflowY = 'hidden'
	}
</script>
<%+cbi/valueheader%>

<input type="button" class="btn cbi-button cbi-button-apply" value="<%:Command line%>" onclick="show_reslov_dialog()" />

<%+cbi/valuefooter%>