<%
	var containerId = m.lib.containerId,
		tuix = m.tuix,
		lib = m.lib,
		sortingEnabled = lib.sortingEnabled(),
		showSortControls = lib.checkThingEnabled('sort_col_headers');
	zenario.sendSignal('eventListPreDisplay', {containerId: containerId, microTemplate: 'fea_list', tuix: tuix, lib: lib});
%>


{{m.lib.displayDevTools()}}


<% var alVisCols = 0, alVisColsIncCB = 0; %>
<% if (1*m.tuix.always_visible_cols) { %>
	<% alVisCols = alVisColsIncCB = 1*m.tuix.always_visible_cols; %>
	
	<% if (m.lib.multiSelectButtonsExist) { %>
		<% ++alVisColsIncCB %>
	<% } %>
<% } %>


<div class="
	{{m.lib.wrapperClassName()|e}}
	
	<% if (alVisColsIncCB) { %>
		zfea_has_always_visible_cols
		zfea_has_{{alVisColsIncCB}}_always_visible_cols
	<% } %>
">
	<% m._position = 'zfea_at_top'; %>
	
	{{m.tuix.header_html}}
	
	<div class="zfea_title_area">
		{{m.lib.pMicroTemplate('title', m)}}
		
		<% if (!m.tuix.hide_item_count && !m.tuix.hide_item_count_at_top) { %>
			{{m.lib.pMicroTemplate('list_item_count', m)}}
		<% } %>
	</div>
	
	<div class="zfea_back_button">
		<% if (zenarioT.find(m.thus.sortedCollectionButtons, "back")) { %>
			{{m.lib.pMicroTemplate('button', m.thus.sortedCollectionButtons, 'back')}}
		<% } %>
	</div>
	<div class="zfea_buttons zfea_top_buttons">
		<% if (zenarioT.find(m.thus.sortedCollectionButtons, "top")) { %>
			{{m.lib.pMicroTemplate('button', m.thus.sortedCollectionButtons, 'top')}}
		<% } %>
	</div>
	
	<% var ci, col, bi, button, oi, log, logName, gi, lg, lgName, ii, item, aboveListButtonHTML = "", colHeadButtonHTML = "", firstItem = true; %>
	
	<!-- Get the HTML for the buttons that appear above the list, if there are any -->
	<% if (zenarioT.find(m.thus.sortedCollectionButtons, "above_list")) { %>
		<% aboveListButtonHTML = $.trim(m.lib.pMicroTemplate("button", m.thus.sortedCollectionButtons, "above_list")); %>
	<% } %>
	<!-- Get the HTML for the buttons that appear above the table, if there are any -->
	<% if (zenarioT.find(m.thus.sortedCollectionButtons, ["column_header", undefined])) { %>
		<% colHeadButtonHTML = $.trim(m.lib.pMicroTemplate("button", m.thus.sortedCollectionButtons, ["column_header", undefined])); %>
	<% } %>
	
	<!-- If the column headers are hidden, display any buttons that were there at the top of the list instead -->
	<% if (m.tuix.hide_column_headings) { %>
			<% aboveListButtonHTML += colHeadButtonHTML; %>
			<% colHeadButtonHTML = ""; %>
	<% } %>
	
	{{m.lib.pMicroTemplate('list_search_and_sort', m)}}
	
	<% if (m.tuix.item_count_message && m.tuix._cms_itemCount > 1) { %>
		<div class="item_count">
			<p>{{m.tuix.item_count_message.replace("[[count]]", m.tuix._cms_itemCount)|e}}</p> 
		</div>
	<% } %>
	
	<% if (aboveListButtonHTML) { %>
		<div class="zfea_buttons zfea_buttons_above_list sorted_buttons">
			{{aboveListButtonHTML}}
		</div>
	<% } %>
	
	{{m.lib.pMicroTemplate('subtitle', m)}}
	
	{{m.tuix.body_html}}
	
	
	<% if (!_.isEmpty(m.tuix.columns)) { %>
		<div class="zfea_table_wrap zfea_table_list_wrap">
			<% foreach (m.thus.sortedListOuterGroupings as oi => logName) { %>
				<% log = m.tuix.list_outer_groupings && m.tuix.list_outer_groupings[logName]; %>
				
				<% if (log) { %>
					{{m.lib.pMicroTemplate('list_outer_grouping', log)}}
				<% } %>
				
				<table
					class="
						table_list
						{{m.tuix.table_css_class|e}}
					
						<% if (m.tuix.list_groupings) {%>
							zfea_group_by
						<% } %>
					"
				>
					<% foreach (m.thus.sortedListGroupings as gi => lgName) { %>
						<% lg = m.tuix.list_groupings && m.tuix.list_groupings[lgName]; %>
						
						<% if (lg) { %>
							
							<% if (log && logName != lg.list_outer_grouping) { %>
								<% continue; %>
							<% } %>
							
							{{m.lib.pMicroTemplate('list_grouping', lg)}}
						<% } %>
						
						<tr>
							<% if (!m.tuix.hide_column_headings) { %>
								<% if (m.lib.multiSelectButtonsExist) { %>
									<th class="zfea_check_all zfea_always_visible">
										<input
											type="checkbox"
											class="zfea_check_all"
											id="zfea_check_all_{{m.lib.containerId|e}}"
											onclick="{{m.lib.fun('checkAllCheckboxes')}}(this);"
										/>
									</th>
								<% } %>
								<% foreach (m.thus.sortedColumns as ci => col) { %>
									<th
										class="
											<% if (ci == 0) { %>
												zfea_first_col
											<% } %>
											<% if (ci < alVisCols) { %>
												zfea_always_visible
											<% } %>
											
											<% if (sortingEnabled && (col.sort_asc || col.sort_desc)) { %>
												<% var thisIsSorted = col.id == m.tuix.key.sortCol; %>
												
												<% if (showSortControls) { %>
													zfea_col_sortable
													
													<% if (!thisIsSorted && col.sort_desc && (!col.sort_asc || col.sort_desc_by_default)) { %>
														zfea_col_will_sort_desc
													<% } %>
												<% } %>
												
												<% if (thisIsSorted) { %>
													zfea_col_sorted
												
													<% if (m.tuix.key.sortDesc) { %>
														zfea_col_sorted_desc
													<% } %>
												<% } %>
											<% } %>
										"
										<% if (showSortControls && (col.sort_asc || col.sort_desc)) { %>
											onclick="{{m.lib.fun('changeSortCol')}}('{{col.id|e}}');"
										<% } %>
									><div>
										<span>{{col.title|e}}</span>
									</div></th>
								<% } %>
								<% if (m.tuix._cms_itemHasItemButton || colHeadButtonHTML) { %>
									<th class="zfea_buttons zfea_buttons_in_column_header sorted_buttons">
										{{colHeadButtonHTML}}
									</th>
								<% } %>
							<% } %>
						</tr>
						
						<% foreach (m.thus.sortedItems as ii => item) { %>
			
							<% if (lg && lgName != item.list_grouping) { %>
								<% continue; %>
							<% } %>
			
							<tr class="zfea_row {{item.row_class|e}}">
								<% if (m.lib.multiSelectButtonsExist) { %>
									<td class="zfea_check_item zfea_always_visible">
										<input
											type="checkbox"
											class="zfea_check_item"
											data-item_id="{{item.id|e}}"
											onclick="{{m.lib.fun('updateItemButtons')}}();"
										/>
									</td>
								<% } %>
								<% foreach (m.thus.sortedColumns as ci => col) { %>
									<td
										id="{{('zfea_' + m.lib.containerId + '_row_' + ii + '_col_' + ci)|e}}"
										data-label="{{col.title|e}}" 
										class="
											{{col.css_class|e}}
											<% if (ci == 0) { %>
												zfea_first_col
											<% } %>
											<% if (ci < alVisCols) { %>
												zfea_always_visible
											<% } %>
											<% if (col.sparkline) { %>
												zfea_col_with_sparkline
											<% } %>
										"
										style="
											<% if (col.align_right) { %>
												text-align: right;
											<% } %>
										"
									>
										{{m.lib.pMicroTemplate('list_parent_cell', {col: col, item: item})}}
									</td>
								<% } %>
								<% if (m.tuix._cms_itemHasItemButton || colHeadButtonHTML) { %>
									<td class="sorted_buttons single_select_buttons">
										<% if (item._cms_sortedItemButtons.length) { %>
											{{m.lib.pMicroTemplate('button', item._cms_sortedItemButtons)}}
										<% } else { %>
											&nbsp;
										<% } %>
									</td>
								<% } %>
								<% if (firstItem) { %>
									<td
										class="sorted_buttons multi_select_buttons"
										id="multi_select_buttons_td_{{m.lib.containerId}}"
										style="display: none;"
										rowspan="{{m.thus.sortedItems.length}}"
									>
										<div id="multi_select_buttons_{{m.lib.containerId}}"></div>
									</td>
								<% } %>
							</tr>
							<% firstItem = false; %>
						<% } %>
						<% if (m.thus.sortedItems.length == 0) { %>
							<% var msg; %>
							<% if (lib.request.search && (msg = m.tuix.no_items_in_search_message)) { %>
								<tr class="zfea_no_items_in_search_message"><td colspan="100%">{{msg}}</td></tr>
							
							<% } else if (msg = m.tuix.no_items_message) { %>
								<tr class="zfea_no_items_message"><td colspan="100%">{{msg}}</td></tr>
							<% } %>
						<% } %>
						
						<% if (lg) { %>
							{{m.lib.pMicroTemplate('list_grouping_end', lg)}}
						<% } %>
					<% } %>
				</table>
				
				<% if (log) { %>
					{{m.lib.pMicroTemplate('list_outer_grouping_end', log)}}
				<% } %>
			<% } %>
		</div>
	<% } %>
	<% m._position = 'zfea_at_bottom'; %>
	
	<% if (!m.tuix.hide_item_count && !m.tuix.hide_item_count_at_bottom && m.tuix._cms_itemCount >= 10) { %>
		{{m.lib.pMicroTemplate('list_item_count', m)}}
	<% } %>
	<% if (!m.tuix.hide_pagination) { %>
		{{m.lib.pMicroTemplate('list_pagination', m)}}
	<% } %>
	
	<% if (zenarioT.find(m.thus.sortedCollectionButtons, "bottom")) { %>
		<div class="zfea_buttons zfea_bottom_buttons">
			{{m.lib.pMicroTemplate("button", m.thus.sortedCollectionButtons, "bottom")}}
		</div>
	<% } %>
	
	{{m.tuix.footer_html}}
</div>


<%
	m.lib.after(function() {
		zenario.sendSignal('eventListPostDisplay', {containerId: containerId, microTemplate: 'fea_list', tuix: tuix, lib: lib});
	});
%>
