<%-
	local dc = require "luci.tools.dnscrypt".init()
	local rsl = dc:resolvers_list(false)
	local ctl = dc:country_list()
	local prl = dc:proto_list()
 	local dnss = dc:dns_list()
	local _, z
-%>
	<script type="text/javascript">//<![CDATA[
			var dnslist = <%= luci.http.write_json(dnss) %>;
function find_in_object(my_object, my_criteria){

  return my_object.filter(function(obj) {
    return Object.keys(my_criteria).every(function(c) {
      return obj[c] == my_criteria[c];
    });
  });

}
function unique_list(data, id) {
    if (data.length > 0) {
        var result = ["ALL"];

        data.forEach(function (elem) {
            if (result.indexOf(elem[id]) === -1) {
                result.push(elem[id]);
            }
        });

        return result;
    }
}
			function cbi_set_values(id, vals) {
				while (id.options[0])
					id.remove(0);

					for (var i = 0; vals && i < vals.length; i += 1)
					{
					//	if (!vals[i+2])
						//	continue;
						var opt = document.createElement('option');
						opt.value = vals[i];
						opt.text = vals[i];
						id.add(opt);
					}
				id.vals = vals;
				}
			function cbi_init_dnslist(self, reset = false) {
				id = "_newsrv";
				var oproto = document.getElementById(id + '.proto');
				var oresolvers = document.getElementById(id + '.resolvers');
				var ocountry = document.getElementById(id + '.country');
				var oname = document.getElementById(id + '.name');
				var oaddrs = document.getElementById(id + '.addrs');
				var oports = document.getElementById(id + '.ports');
				var ohints = document.getElementById(id + '.hints');
				var oaddbt = document.getElementById("cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>");

				filter = {};
				vproto = reset ? "ALL" : oproto.value;
				vresolvers = reset ? "ALL" : oresolvers.value;
				vcountry = reset ? "ALL" : ocountry.value;
				vname = reset ? "ALL" : oname.value;
				vaddrs = reset ? "ALL" : oaddrs.value;
				vports = reset ? "ALL" : oports.value;
				if (vproto != "ALL" && vproto != "") filter["proto"] = vproto;
				if (vresolvers != "ALL" && vresolvers != "") filter["resolver"] = vresolvers;
				if (vcountry != "ALL" && vcountry != "") filter["country"] = vcountry;
				if (vname != "ALL" && vname != "") filter["name"] = vname;
				if (vaddrs != "ALL" && vaddrs != "") filter["addrs"] = vaddrs;
				if (vports != "ALL" && vports != "") filter["ports"] = vports;

				var dst = find_in_object(dnslist, filter);
				cbi_set_values(oproto, unique_list(dst, "proto"));
				cbi_set_values(oresolvers, unique_list(dst, "resolver"));
				cbi_set_values(ocountry, unique_list(dst, "country"));
				cbi_set_values(oname, unique_list(dst, "name"));
				cbi_set_values(oaddrs, unique_list(dst, "addrs"));
				cbi_set_values(oports, unique_list(dst, "ports"));

				if (dst.length === 1) {
					vproto = dst[0]["proto"];
					vresolvers = dst[0]["resolver"];
					vcountry = dst[0]["country"];
					vname = dst[0]["name"];
					vaddrs = dst[0]["addrs"];
					document.getElementById(id + '.alias').value = vname + "." + vcountry + "@" + vproto;
					document.getElementById(id + '.stamp').value = dst[0]['stamp'];
				}
				oproto.value = vproto;
				oresolvers.value = vresolvers;
				ocountry.value = vcountry;
				oname.value = vname;
				oaddrs.value = vaddrs;
				oports.value = vports;

				oaddbt.disabled = ( dst.length !== 1);
				ohints.innerHTML = "Filter: (" + String(dst.length) + ")" + JSON.stringify(filter) + '\n' + ((dst.length < 80) ? JSON.stringify(dst) : "<%:more than 100, try filter out to show details...%>");
				}
	//]]></script>
<div class="cbi-section cbi-tblsection">
	<h3><%:DNS Resolver Filter%></h3>
<div class="table cbi-section-table">
	<div class="tr cbi-section-table-titles">
			<div class="th cbi-section-table-cell"><%:Resolvers%></div>
			<div class="th cbi-section-table-cell"><%:Country%></div>
			<div class="th cbi-section-table-cell"><%:Protocol%></div>
			<div class="th cbi-section-table-cell"><%:Resolver%></div>
			<div class="th cbi-section-table-cell"><%:Address%></div>
			<div class="th cbi-section-table-cell"><%:Port%></div>
			<div class="th cbi-section-table-cell cbi-section-actions"></div>
		</div>
		<div class="tr cbi-section-table-row">
			<div class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.resolvers" name="_newsrv.resolvers">
					<option value="ALL"><%:ALL%></option>
					<% for _, z in ipairs(rsl) do -%><option value="<%=z%>"><%=z%></option><%- end %>
				</select>
			</div>
			<div class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.country" name="_newsrv.country">
					<option value="ALL"><%:ALL%></option>
					<% for _, z in pairs(ctl) do -%><option value="<%=z%>"><%=z%></option><%- end %>
				</select>
			</div>
			<div  class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.proto" name="_newsrv.proto">
					<option value="ALL"><%:ALL%></option>
					<% for _, z in pairs(prl) do -%><option value="<%=z%>"><%=z%></option><%- end %>
				</select>
			</div>
			<div class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.name" name="_newsrv.name">
					<option value="ALL"><%:ALL%></option>
					<% for _, z in pairs(dnss) do -%><option value="<%=z['name']%>"><%=z['name']%></option><%- end %>
				</select>
			</div>
			<div class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.addrs" name="_newsrv.addrs">
					<option value="ALL"><%:ALL%></option>
					<% for _, z in pairs(dnss) do -%><option value="<%=z['addrs']%>"><%=z['addrs']%></option><%- end %>
				</select>
			</div>
			<div class="td cbi-section-table-cell">
				<select class="cbi-input-select" id="_newsrv.ports" name="_newsrv.ports">
					<option value="ALL"><%:ALL%></option>
				</select>
			</div>
			<div class="td cbi-section-table-cell nowrap cbi-section-actions"><div>
				<input type="reset" class="cbi-button cbi-button-reset" name="_newsrv.reset" id="_newsrv.reset" value="<%:Reset%>" />
			</div></div>
		</div>
	</div>
	<div class="table cbi-section-table">
		<div class="tr cbi-section-table-row">
			<div class="td cbi-section-table-cell">
				<input type="text" class="cbi-input-text" id="_newsrv.alias" name="_newsrv.alias" placeholder="<%:Alias%>" />
			</div>
			<div class="td cbi-section-table-cell">
				<input type="text" class="cbi-input-text" id="_newsrv.stamp" name="_newsrv.stamp" data-optional="false" placeholder="<%:Stamp%>" />
			</div>
			<div class="td cbi-section-table-cell nowrap cbi-section-actions"><div>
				<input type="submit" class="cbi-button cbi-button-add" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" value="<%:Add%>" />
			</div></div>
		</div>
	</div>
</div>

<textarea class="cbi-input-textarea" style="width: 100%" id="_newsrv.hints" name="_newsrv.hints" data-update="change" rows="10" wrap="soft" readonly="true">sample</textarea>

	<script type="text/javascript">//<![CDATA[
		cbi_init_dnslist();
		document.getElementById('_newsrv.country').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
		document.getElementById('_newsrv.resolvers').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
		document.getElementById('_newsrv.proto').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
		document.getElementById('_newsrv.name').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
		document.getElementById('_newsrv.addrs').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
	document.getElementById('_newsrv.ports').addEventListener('change', function() {try{cbi_init_dnslist();}catch(e){}});
	document.getElementById('_newsrv.reset').addEventListener('click', function() {try{cbi_init_dnslist(true);}catch(e){};});
	//]]></script>
