%[if %("%id=anchor_tag%" != "")% ]%
<div id="%id=anchor_tag%" style="overflow:hidden; height:0px;">%id=anchor_tag%</div>
%[endif]%

%%[[if edit]]%%
	%[if %("%id=display_conditions_in_edit_mode%" == "true")% ]%
	<div id="query_display_edit_mode_title_%id%" class="query_display_edit_mode_title">
		%[if %("%id=condition%" == "webpage_link_has_any_query_string")% ]%
		If the webpage link has <strong>any query string</strong>
		%[endif]%

		%[if %("%id=condition%" == "webpage_link_has_no_query_string")% ]%
		If the webpage link has <strong>no query string</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_not_equal_to")% ]%
		If the webpage link has a key not equal to <strong>%id=query_key%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_starts_with")% ]%
		If the webpage link has a key that starts with <strong>%id=query_key%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_ends_with")% ]%
		If the webpage link has a key that ends with <strong>%id=query_key%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_equal_to")% ]%
		If the webpage link has a value equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_not_equal_to")% ]%
		If the webpage link has a value not equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_less_than")% ]%
		If the webpage link has a value less than <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_more_than")% ]%
		If the webpage link has a value more than <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_less_than_or_equal_to")% ]%
		If the webpage link has a value less-than or equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_more_than_or_equal_to")% ]%
		If the webpage link has a value more-than or equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_between_range_of")% ]%
		If the webpage link has a value between the range of <strong>%id=query_range[0]%</strong> and <strong>%id=query_range[1]%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_is_outside_range_of")% ]%
		If the webpage link has a value outside the range of <strong>%id=query_range[0]%</strong> and <strong>%id=query_range[1]%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_starts_with")% ]%
		If the webpage link has a value starting with <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "value_ends_with")% ]%
		If the webpage link has a value ending with <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_equal_to")% ]%
		If the webpage link has both a key of <strong>%id=query_key%</strong> and a value of <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_not_equal_to")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> but a value not equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_less_than")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> but a value less-than <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_more_than")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> and a value more-than <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_less_than_or_equal_to")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> and a value less-than or equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_more_than_or_equal_to")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> and a value more-than or equal to <strong>%id=query_value%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_between_ranges_of")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> and a value between the range of <strong>%id=query_range[0]%</strong> and <strong>%id=query_range[1]%</strong>
		%[endif]%

		%[if %("%id=condition%" == "key_is_equal_to_and_value_is_outside_ranges_of")% ]%
		If the webpage link has a key equal to <strong>%id=query_key%</strong> and a value outside the range of <strong>%id=query_range[0]%</strong> and <strong>%id=query_range[1]%</strong>
		%[endif]%
	</div>
	%[endif]%
%%[[endif]]%%

<div id="query_display_%id%" class="query_display">
	%slice%
</div>

%%[[if !edit]]%%
<script>
	const urlParams_%id% = new URLSearchParams(location.search);

	%[if %("%id=console_log%" == "true")% ]%console.log('Query string is: ' + urlParams_%id%);%[endif]%

	%[if %("%id=condition%" == "webpage_link_has_any_query_string")% ]%
	if (urlParams_%id% != false) {
		document.getElementById("query_display_%id%").classList.add("query_match");
	}
	%[endif]%

	%[if %("%id=condition%" == "webpage_link_has_no_query_string")% ]%
	if (urlParams_%id% == false) {
		document.getElementById("query_display_%id%").classList.add("query_match");
	}
	%[endif]%

	for (const [key, value] of urlParams_%id%) {
		%[if %("%id=console_log%" == "true")% ]%console.log(`${key}:${value}`);%[endif]%

		setTimeout(function(){

			%[if %("%id=condition%" == "key_is_equal_to")% ]%
			if (`${key}` == "%id=query_key%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_not_equal_to")% ]%
			if (`${key}` != "%id=query_key%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_starts_with")% ]%
			var key_starts_with = `${key}`.startsWith('%id=query_key%');
			if (key_starts_with == true) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_ends_with")% ]%
			var key_ends_with = `${key}`.endsWith('%id=query_key%');
			if (key_ends_with == true) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_equal_to")% ]%
			if (`${value}` == "%id=query_value%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_not_equal_to")% ]%
			if (`${value}` != "%id=query_value%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_less_than")% ]%
			if (`${value}` < %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_more_than")% ]%
			if (`${value}` > %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_less_than_or_equal_to")% ]%
			if (`${value}` <= %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_more_than_or_equal_to")% ]%
			if (`${value}` >= %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_between_range_of")% ]%
			if (`${value}` > %id=query_range[0]% && `${value}` < %id=query_range[1]%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_is_outside_range_of")% ]%
			if (`${value}` < %id=query_range[0]% && `${value}` > %id=query_range[1]%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_starts_with")% ]%
			var value_starts_with = `${value}`.startsWith('%id=query_value%');
			if (value_starts_with == true) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "value_ends_with")% ]%
			var value_ends_with = `${value}`.endsWith('%id=query_value%');
			if (value_ends_with == true) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_equal_to")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` == "%id=query_value%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_not_equal_to")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` != "%id=query_value%") {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_less_than")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` < %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_more_than")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` > %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_less_than_or_equal_to")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` <= %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_more_than_or_equal_to")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` >= %id=query_value%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_between_ranges_of")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` > %id=query_range[0]% && `${value}` < %id=query_range[1]%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

			%[if %("%id=condition%" == "key_is_equal_to_and_value_is_outside_ranges_of")% ]%
			if (`${key}` == "%id=query_key%" && `${value}` < %id=query_range[0]% && `${value}` > %id=query_range[1]%) {
				document.getElementById("query_display_%id%").classList.add("query_match");
			}
			%[endif]%

		}, %id=delay%);

	}
</script>
%%[[endif]]%%

%%[[if edit]]%%
%[if %("%id=show_examples%" == "true")% ]%
<div id="query_display_examples_%id%" class="query_display_examples">
A typical link might have a key / value pair appended onto it like this:<br>
https://example.com/products/latest/<strong>?key=value</strong>
<br>
<br>
More complicated links could have multiple key / value pairs appended, with each separated with an ampersand. QueryDisplay is able to query them all:<br>
https://example.com/products/latest/<strong>?key=value&key=value&key=value&key=value</strong>
<br>
<br>
In the real world, a link we can query against could look something like this:<br>
https://example.com/products/latest/<strong>?widget_stock_level=12</strong>
<br>
<br>
Depending on the setup of your test condition, key and value, we can return different results:
<br>
<table id="query_display_table_%id%" class="query_display_table">
	<thead>
		<tr>
			<th>Test Condition</th><th>Test Key</th><th>Test Value</th><th>Returned Condition (Result)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Key Is Equal To</td>
			<td>widget_stock_level</td>
			<td></td>
			<td>true</td>
		</tr>
		<tr>
			<td>Key Is Equal To</td>
			<td>favourite_widgets</td>
			<td></td>
			<td>false</td>
		</tr>
		<tr>
			<td>Key Starts With</td>
			<td>widget_</td>
			<td></td>
			<td>true</td>
		</tr>
		<tr>
			<td>Value Is Less Than</td>
			<td></td>
			<td>24</td>
			<td>true</td>
		</tr>
		<tr>
			<td>Value Is Less Than</td>
			<td></td>
			<td>12</td>
			<td>false</td>
		</tr>
		<tr>
			<td>Value Is Less Than Or Equal To</td>
			<td></td>
			<td>12</td>
			<td>true</td>
		</tr>
		<tr>
			<td>Value Is More Than</td>
			<td></td>
			<td>14</td>
			<td>false</td>
		</tr>
		<tr>
			<td>Value Is Between Range Of</td>
			<td></td>
			<td>10 and 20</td>
			<td>true</td>
		</tr>
		<tr>
			<td>Key Is Equal To And Value Is Equal To</td>
			<td>stock_level</td>
			<td>12</td>
			<td>false</td>
		</tr>
		<tr>
			<td>Key Is Equal To And Value Is Equal To</td>
			<td>widget_stock_level</td>
			<td>13</td>
			<td>false</td>
		</tr>
		<tr>
			<td>Key Is Equal To And Value Is Equal To</td>
			<td>widget_stock_level</td>
			<td>12</td>
			<td>true</td>
		</tr>
		<tr>
			<td>Webpage Link Has Any Query String</td>
			<td>best_sellars</td>
			<td></td>
			<td>true</td>
		</tr>
		<tr>
			<td>Webpage Link Has No Query String</td>
			<td></td>
			<td></td>
			<td>true</td>
		</tr>
	</tbody>
</table>
Commonly if the returned condition is true, we could display the item. And reverse the logic if the returned condition is false.
<br>
<br>
The above table proves that you can either test against keys or values. Alternatively you can setup a more stringent test, whereby you test for an exact key / value pair match, like the final example shows.
<br>
<br>
<strong>Please note:</strong><br> Equal-to, not equal-to, starts with and ends with test conditions can evaluate against all data types (strings, booleans and integers). Less-than, more-than and range test conditions can only be used with integers (number values).
</div>
%[endif]%
%%[[endif]]%%