<style type="text/css">ul.switch-bottom{margin-bottom:30px}</style>

<script type="text/javascript">
(function(){
	<%-
		local para = {
			light = {config = {}}
		}

		local result = tpl_get_data(para)
		local enable = result[K_MODULE].light.config.enable
	-%>
	var enable = '<%=enable%>';

	initSwitch("Switch", enable, onSwitchClick);

	function onSwitchClick(state, init){
		if(!init){
			var para = {};
			para.light = {};
			para.light.config = {enable:$("#Switch").attr("data-value")};

			showLoading(label.saving);
			apiSet(para, function(ret){
				var code = ret[ERR_CODE];
				handleError(code, showNote)?closeLoading():closeLoading(ret[K_MODULE].light.config.wait_time);
			});
		}
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/led.png?_=20191016014108" />
			<span class="help-title">{%label.ledTip%}</span>
		</li>
		<li class="summary">{%helpStr.light%}</li>
		<li class="summary">{%helpStr.lightTip%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/led.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.ledSet%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con switch-bottom">
		<li class="text-con">
			<label class="desc-lbl">{%label.ledSet%}</label>
			<span class="set-con-middle">
				<span id="Switch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</span>
		</li>
	</ul>
	<div class="err-note hidden">
		<i class="err-icon icon_remind_line"></i>
		<p class="note-str"></p>
	</div>
</div>