%[if %("%id=live_search%" == "true")% ]%
<input type="text" id="my_input_%id%" class="flatpack_search_%id%" data-table_%id%="flatpack_table_%id%" placeholder="%id=live_search_placeholder%">
%[endif]%

<div id="flatpack_table_wrapper_%id%" class="flatpack_table_wrapper">

	%%[[if !edit]]%%
	<table id="flatpack_table_%id%" class="flatpack_table flatpack_table_%id%" role="table">
		<thead role="rowgroup">
			<tr role="row">
				%[if %("%id=column_count%" == "one")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				%[endif]%
				%[if %("%id=column_count%" == "two")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				%[endif]%
				%[if %("%id=column_count%" == "three")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				%[endif]%
				%[if %("%id=column_count%" == "four")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				%[endif]%
				%[if %("%id=column_count%" == "five")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				%[endif]%
				%[if %("%id=column_count%" == "six")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				%[endif]%
				%[if %("%id=column_count%" == "seven")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				%[endif]%
				%[if %("%id=column_count%" == "eight")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				%[endif]%
				%[if %("%id=column_count%" == "nine")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				%[endif]%
				%[if %("%id=column_count%" == "ten")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				%[endif]%
				%[if %("%id=column_count%" == "eleven")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				<th role="columnheader">%id=tableheader_11%</th>
				%[endif]%
				%[if %("%id=column_count%" == "twelve")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				<th role="columnheader">%id=tableheader_11%</th>
				<th role="columnheader">%id=tableheader_12%</th>
				%[endif]%
				%[if %("%id=column_count%" == "thirteen")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				<th role="columnheader">%id=tableheader_11%</th>
				<th role="columnheader">%id=tableheader_12%</th>
				<th role="columnheader">%id=tableheader_13%</th>
				%[endif]%
				%[if %("%id=column_count%" == "fourteen")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				<th role="columnheader">%id=tableheader_11%</th>
				<th role="columnheader">%id=tableheader_12%</th>
				<th role="columnheader">%id=tableheader_13%</th>
				<th role="columnheader">%id=tableheader_14%</th>
				%[endif]%
				%[if %("%id=column_count%" == "fifteen")% ]%
				<th role="columnheader">%id=tableheader_1%</th>
				<th role="columnheader">%id=tableheader_2%</th>
				<th role="columnheader">%id=tableheader_3%</th>
				<th role="columnheader">%id=tableheader_4%</th>
				<th role="columnheader">%id=tableheader_5%</th>
				<th role="columnheader">%id=tableheader_6%</th>
				<th role="columnheader">%id=tableheader_7%</th>
				<th role="columnheader">%id=tableheader_8%</th>
				<th role="columnheader">%id=tableheader_9%</th>
				<th role="columnheader">%id=tableheader_10%</th>
				<th role="columnheader">%id=tableheader_11%</th>
				<th role="columnheader">%id=tableheader_12%</th>
				<th role="columnheader">%id=tableheader_13%</th>
				<th role="columnheader">%id=tableheader_14%</th>
				<th role="columnheader">%id=tableheader_15%</th>
				%[endif]%
			</tr>
		</thead>
		<tbody id="flatpack_table_body_%id%" class="flatpack_table_body" role="rowgroup">
	%%[[endif]]%%

	%%[[if edit]]%%
	<div id="editHeaders%id%">
		%[if %("%id=column_count%" == "one")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		%[endif]%
		%[if %("%id=column_count%" == "two")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		%[endif]%
		%[if %("%id=column_count%" == "three")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		%[endif]%
		%[if %("%id=column_count%" == "four")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		%[endif]%
		%[if %("%id=column_count%" == "five")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		%[endif]%
		%[if %("%id=column_count%" == "six")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		%[endif]%
		%[if %("%id=column_count%" == "seven")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		%[endif]%
		%[if %("%id=column_count%" == "eight")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		%[endif]%
		%[if %("%id=column_count%" == "nine")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		%[endif]%
		%[if %("%id=column_count%" == "ten")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		%[endif]%
		%[if %("%id=column_count%" == "eleven")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_11%</div>
		%[endif]%
		%[if %("%id=column_count%" == "twelve")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_11%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_12%</div>
		%[endif]%
		%[if %("%id=column_count%" == "thirteen")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_11%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_12%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_13%</div>
		%[endif]%
		%[if %("%id=column_count%" == "fourteen")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_11%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_12%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_13%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_14%</div>
		%[endif]%
		%[if %("%id=column_count%" == "fifteen")% ]%
		<div class="flatpack_tableFauxCell colHeader firstColHeader">%id=tableheader_1%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_2%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_3%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_4%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_5%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_6%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_7%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_8%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_9%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_10%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_11%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_12%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_13%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_14%</div>
		<div class="flatpack_tableFauxCell colHeader">%id=tableheader_15%</div>
		%[endif]%
	</div>
	<div id="flatpack_table_%id%">
	%%[[endif]]%%

			%slice -addTypes="com.stacks4stacks.stacks.flatpackrow, com.stacks4stacks.stacks.flatpackcsvdata" -addInit=1%

	%%[[if edit]]%%
	</div>
	%%[[endif]]%%

	%%[[if !edit]]%%
		</tbody>
	</table>
	%%[[endif]]%%

</div>

%[if %("%id=live_search%" == "true")% ]%
<script>
(function(document) {
	'use strict';

	var TableFilter = (function(myArray) {
		var search_input;

		function _onInputSearch(e) {
			search_input = e.target;
			var tables = document.getElementsByClassName(search_input.getAttribute('data-table_%id%'));
			myArray.forEach.call(tables, function(table) {
				myArray.forEach.call(table.tBodies, function(tbody) {
					myArray.forEach.call(tbody.rows, function(row) {
						var text_content = row.textContent.toLowerCase();
						var search_val = search_input.value.toLowerCase();
						row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
					});
				});
			});
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('flatpack_search_%id%');
				myArray.forEach.call(inputs, function(input) {
					input.oninput = _onInputSearch;
				});
			}
		};
	})(Array.prototype);

	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
			TableFilter.init();
		}
	});

})(document);
</script>
%[endif]%

%%[[if !edit]]%% 
<!-- Demo stack. Credit to remain on display at ALL times. If you like this stack, then please buy a copy of it. -->
<div style="position:fixed;bottom:0;left:0;z-index:999999;font-family:monospace;font-size:13px;color:#fff;background:#000;padding:0.5rem;">This webpage uses the free demo version of %stackTitle% v%stackVersion%</div>
%%[[endif]]%%