<style type="text/css">p.price-remark{color:#767d82;width:300px}div.err-note{width:450px;margin:20px auto}p.price-remark{color:#767d82;width:450px}ul.set-con{margin:0 50px 0}li.set-con-radio{width:310px;margin-top:60px}li.set-con-tip{margin-top:0}span.radio-r{margin-left:0}span.checked i.checked{color:#ff7800}span.radio{width:155px;text-align:center;display:inline-block}hr.mode{color:#dcdcdc;width:132px;margin-top:18px;margin-left:88px;position:absolute}div.tip-first{margin-top:44px}span.radio-group{width:310px}</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			mode_switch = {config = {}}
		}

		local data = tpl_get_data(para, true)
	-%>

	var modeInfo = <%=data%>;
	var modeVal;

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var mode = ret.mode_switch.config;
		var modeSwitch = mode.mode;
		
		if ("ap" == modeSwitch){
			modeSwitch = 1;
		}else{
			modeSwitch = 0;
		}
		initRadio("ModeSwitch", modeSwitch, function(idx){
			if (0 == idx){
				$("#RouterHelp").show();
				$("#ApHelp").hide();
				modeVal = "router";
			}else{
				$("#RouterHelp").hide();
				$("#ApHelp").show();
				modeVal = "ap";
			}
		});
	}

	init(modeInfo);

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.mode_switch = {};
		para.mode_switch.config = data;
		data.mode = modeVal;

		showConfirm(label.saveModeTip, function(choose){
			if (choose){
				showLoading(label.saving);
				apiSet(para, function(ret){
					var code = ret[ERR_CODE];
					if (E_NONE == code){
						showProgressBar(label.modeSet, label.saveMode, ROUTER.time.reboot, function(){
							window.location.href = "http://" + ROUTER.domain;
						});
					}else{
						closeLoading();
						handleError(code);
					}
				});
			}
		});
    });
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/mode_switch.png?_=20191016014108" />
			<span class="help-title">{%label.modeSet%}</span>
		</li>
		<li class="summary">{%helpStr.modeSet%}</li>
		<li class="title">{%label.routerMode%}</li>
		<li class="content">{%helpStr.routerMode%}</li>
		<li class="title">{%label.apMode%}</li>
		<li class="content">{%helpStr.apMode%}</li>
		<li class="summary">{%helpStr.modeSetNote%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/mode_switch.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.modeSet%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-radio">
		<li class="set-con-radio">
			<hr size="1" class="mode">
			<span id="ModeSwitch" class="radio-group">
				<span class="radio uncheck">
					<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
				</span>
				<span class="radio radio-r uncheck">
					<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
				</span>
			</span>
		</li>
	</ul>
	<ul class="set-con set-con-radio">
		<li class="set-con-radio set-con-tip">
			<span class="radio-group">
				<span class="radio uncheck">
					<label>{%label.routerMode%}</label>
				</span>
				<span class="radio radio-r uncheck">
					<label>{%label.apMode%}</label>
				</span>
			</span>
		</li>
	</ul>
	<div class="err-note tip-first" id="RouterHelp">
		<p class="note-str price-remark">{%label.modeTipOne%}</p>
	</div>
	<div id="ApHelp">
		<div class="err-note tip-first">
			<p class="note-str price-remark">{%label.modeTipTwo%}</p>
		</div>
		<div class="err-note">
			<p class="note-str price-remark">{%label.modeTipThree%}</p>
		</div>
		<div class="err-note">
			<p class="note-str price-remark">{%label.modeTipFour%}</p>
		</div>
	</div>
	<div class="btn-con">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
</div>