<%+cbi/valueheader%>

<script type="text/javascript">//<![CDATA[
	var freqlist = <%= luci.http.write_json(self.freqlist) %>;
	var hwmodes  = <%= luci.http.write_json(self.hwmodes) %>;

	var channels = {
		'11g': [
			'auto', 'auto', true
		],
		'11a': [
			'auto', 'auto', true
		]
	};

	for (var i = 0; i < freqlist.length; i++)
		channels[(freqlist[i].mhz > 2484) ? '11a' : '11g'].push(
			freqlist[i].channel,
			'%d (%d MHz)'.format(freqlist[i].channel, freqlist[i].mhz),
			!freqlist[i].restricted
		);

	var modes = [
		'', 'Legacy', true,
		'n', 'N', hwmodes.n,
		'ac', 'AC', hwmodes.ac
	];

	var htmodes = {
		'':   [
			'', '-', true
		],
		'n':  [
			'HT20', '20 MHz', true,
			'HT40', '40 MHz', true
		],
		'ac': [
			'VHT20', '20 MHz', true,
			'VHT40', '40 MHz', true,
			'VHT80', '80 MHz', true,
			'VHT160', '160 MHz', true
		]
	};

	var bands = {
		'':   [
			'11g', '2.4 GHz', (channels['11g'].length > 3),
			'11a', '5 GHz', (channels['11a'].length > 3)
		],
		'n':  [
			'11g', '2.4 GHz', (channels['11g'].length > 3),
			'11a', '5 GHz', (channels['11a'].length > 3)
		],
		'ac': [
			'11a', '5 GHz', true
		]
	};

	function cbi_set_values(sel, vals)
	{
		if (sel.vals)
			sel.vals.selected = sel.selectedIndex;

		while (sel.options[0])
			sel.remove(0);

		for (var i = 0; vals && i < vals.length; i += 3)
		{
			if (!vals[i+2])
				continue;

			var opt = document.createElement('option');
			    opt.value = vals[i+0];
			    opt.text  = vals[i+1];

			sel.add(opt);
		}

		if (!isNaN(vals.selected))
			sel.selectedIndex = vals.selected;

		sel.parentNode.style.display = (sel.options.length <= 1) ? 'none' : '';
		sel.vals = vals;
	}

	function cbi_toggle_wifi_mode(id)
	{
		cbi_toggle_wifi_htmode(id);
		cbi_toggle_wifi_band(id);
	}

	function cbi_toggle_wifi_htmode(id)
	{
		var mode = document.getElementById(id + '.mode');
		var bwdt = document.getElementById(id + '.htmode');

		cbi_set_values(bwdt, htmodes[mode.value]);
	}

	function cbi_toggle_wifi_band(id)
	{
		var mode = document.getElementById(id + '.mode');
		var band = document.getElementById(id + '.band');

		cbi_set_values(band, bands[mode.value]);
		cbi_toggle_wifi_channel(id);
	}

	function cbi_toggle_wifi_channel(id)
	{
		var band = document.getElementById(id + '.band');
		var chan = document.getElementById(id + '.channel');

		cbi_set_values(chan, channels[band.value]);
	}

	function cbi_init_wifi(id)
	{
		var mode = document.getElementById(id + '.mode');
		var band = document.getElementById(id + '.band');
		var chan = document.getElementById(id + '.channel');
		var bwdt = document.getElementById(id + '.htmode');

		cbi_set_values(mode, modes);

		if (/VHT20|VHT40|VHT80|VHT160/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
			mode.value = 'ac';
		else if (/HT20|HT40/.test(<%= luci.http.write_json(self.map:get(section, "htmode")) %>))
			mode.value = 'n';
		else
			mode.value = '';

		cbi_toggle_wifi_mode(id);

		if (/a/.test(<%= luci.http.write_json(self.map:get(section, "hwmode")) %>))
			band.value = '11a';
		else
			band.value = '11g';

		cbi_toggle_wifi_band(id);

		bwdt.value = <%= luci.http.write_json(self.map:get(section, "htmode")) %>;
		chan.value = <%= luci.http.write_json(self.map:get(section, "channel")) %>;
	}
//]]></script>

<label style="float:left; margin-right:3px">
	<%:Mode%><br />
	<select style="width:auto" id="<%= cbid %>.mode" name="<%= cbid %>.mode" onchange="cbi_toggle_wifi_mode('<%= cbid %>')"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Band%><br />
	<select style="width:auto" id="<%= cbid %>.band" name="<%= cbid %>.band" onchange="cbi_toggle_wifi_band('<%= cbid %>')"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Channel%><br />
	<select style="width:auto" id="<%= cbid %>.channel" name="<%= cbid %>.channel"></select>
</label>
<label style="float:left; margin-right:3px">
	<%:Width%><br />
	<select style="width:auto" id="<%= cbid %>.htmode" name="<%= cbid %>.htmode"></select>
</label>
<br style="clear:left" />

<script type="text/javascript">cbi_init_wifi('<%= cbid %>');</script>

<%+cbi/valuefooter%>
