<style>
.table_column_name{
	float:left;
	line-height:30px;
	height:30px;
}
.table_column_arrow_container{
	float:left;
	position:relative;
	left:10px;
	height:30px;
	width:20px
}
.table_column_arrows{
	cursor:pointer;
	float:left;
	height:16px;
	width:16px;
	position:relative;
	top:7px;
}
.table_scroll_diveder{
	width:1px;
	top:40px;
	height:calc(100% - 80px);
	right:15px;
	background:<%= $gray %>;
	position:absolute;
	z-index:5;
	display:none
}
.table_body_container{
	width:100%;
	top:40px;
	height:calc(100% - 80px);
	left:0px;
	position:absolute;
	overflow:scroll;
	overflow-x:hidden;
}

.table_footer_container{
	width:100%;
	height:40px;
	top:calc(100% - 40px);
	left:0px;
	position:absolute;
	background:<%= $red %>;
	color:<%= $white %>;
	line-height:40px
}
.table_footer_page_container{
	width:400px;
	top:5px;
	right:10px;
	height:30px;
	position:absolute
}
.table_footer_page_text{
	width:150px;
	position:absolute;
	height:30px;
	left:0px;
	top:0px;
	line-height:30px;
	color:<%= $white %>;
	text-align:right
}
.table_footer_page_arrow_container{
	width:240px;
	height:30px;
	position:absolute;
	top:5px;
	left:160px;
	line-height:15px;
	font-size:14px;
}
.table_footer_page_arrows{
	position:absolute;
	cursor:pointer;
	top:0px;
	height:20px;
	width:20px;
}
.table_footer_page_arrows_double{
	position:absolute;
	cursor:pointer;
	top:3px;
	height:14px;
	width:14px;
}
.table_footer_page_input{
	text-align:right;
	width:60px;
	height:18px;
	font-size:16px;
	border:0;
	top:0px;
	left:50px;
	position:absolute;
	outline: 0;
	border-bottom:1px solid <%= $white %>;
	color:<%= $white %>;
	background:<%= $red %>
}

.table_footer_page_all{
	text-align:left;
	width:60px;
	height:18px;
	font-size:16px;
	border:0;
	top:0px;
	left:130px;
	position:absolute;
	outline: 0;
	border-bottom:1px solid <%= $white %>;
	color:<%= $white %>;
	background:<%= $red %>
}
.table_footer_page_delimiter{
	width:10px;
	height:20px;
	position:absolute;
	top:0px;
	left:115px;
	line-height:20px;
	font-size:16px;
	text-align:center
}

.table_footer_additional_field{
	height:30px;
	top:5px;
	left:95px;
	width:calc(100% - 350px);
	position:absolute;
	background:transparent;
}
.table_footer_additional_field_back{
	height:39px;
	top:0px;
	left:90px;
	width:calc(100% - 345px);
	position:absolute;
	border-top:1px solid <%= $gray %>;
	background:<%= $l_gray %>;
}

</style>
	
	
	
	<table class="table_header">
		<tr>
			<% header.each do |item| %> 
				
				<td <% if item[:filter] != "none"; %> style="cursor:pointer;<%= item[:width] %>" onclick="gt_build_table_<%= name %>('<%= item[:filter] %>','change')"  <% else; %> style="<%= item[:width] %>" <% end; %>>
					<div  class="table_column_name"><%= raw item[:row_name] %></div>
					<div class="table_column_arrow_container">
						<%= image_tag( "shared/up.png",style:"display:none", class:"table_column_arrows", id:"table_#{name}_ASC_#{item[:filter]}") %>
						<%= image_tag( "shared/down.png", style:"display:none", class:"table_column_arrows", id:"table_#{name}_DESC_#{item[:filter]}" ) %>
					</div>
				</td>
			<% end %>
		</tr>
	</table>
	<div id="gt_container_body_table_<%= name %>" class="table_body_container">
		<table id="gt_body_<%= name %>" class="table_body"></table>
	</div>
	<div class="table_footer_container">
		<% if additional_field.length > 0 %>
			<div class="table_footer_additional_field_back"></div>
			<div id="table_footer_field_<%= name %>" class="table_footer_additional_field"><%= raw additional_field %></div>
		<% end %>
		<div class="button" onclick="gt_export_table_<%= name %>()" style="width:70px;top:5px;left:10px;background:<%= $red %>"><%= t(:export)%></div>
		<div class="table_footer_page_container">
			<div class="table_footer_page_arrow_container" >
				<%= image_tag( "shared/double_left.png", style:"left:6px", onclick: "gt_last_page_select_#{name}(0)", class:"table_footer_page_arrows_double") %>
				<%= image_tag( "shared/left_white.png", style:"left:20px", onclick: "gt_remove_page_#{name}()", class:"table_footer_page_arrows") %>
				<input onchange="gt_change_page_<%= name %>()" id="gt_selected_page_<%= name %>" class="table_footer_page_input" >
				<div class="table_footer_page_delimiter"><b>/</b></div>
				<input disabled id="gt_all_pages_<%= name %>" class="table_footer_page_all" >
				<%= image_tag( "shared/right_white_v2.png", style:"left:200px", onclick: "gt_add_page_#{name}()", class:"table_footer_page_arrows") %>
				<%= image_tag( "shared/double_right.png", style:"left:220px", onclick: "gt_last_page_select_#{name}(1)", class:"table_footer_page_arrows_double") %>
			</div>
		</div>
	</div>
<script>
gt_last_page_<%= name %>=1
gt_last_sort_<%= name %>='<%= raw first_sort %>'
gt_result_data_<%= name %>=""
gt_check_load_<%= name %>=0
gt_last_sort_direction_<%= name %>='<%= raw first_sort.split(';')[1] %>'
function gt_build_table_<%= name %>(sort,change_direction){
	if(change_direction != null){
		gt_last_sort_direction_<%= name %>=gt_last_sort_direction_<%= name %> == 'DESC' ? 'ASC' : 'DESC'
	}
	show_loading(1)
	if(gt_check_load_<%= name %> == 1){return false}
	gt_last_sort_<%= name %>=sort.split(';')[0]+';'+gt_last_sort_direction_<%= name %>
	sort_arrows=document.getElementsByClassName('table_column_arrows')
	for(i=0;i<sort_arrows.length;i++){
		sort_arrows[i].style.display='none'
	}
	document.getElementById("table_<%= name %>_"+gt_last_sort_direction_<%= name %>+"_"+sort.split(';')[0]).style.display=''
	$('.gt_row_<%= name %>').remove();
	gt_check_load_<%= name %> = 1
	$.getJSON('<%= query %>' ,{order: gt_last_sort_<%= name %>, time: <%= time %>, start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format(), page: gt_last_page_<%= name %>, offset: <%= offset %><%= raw add_params %>, export: 0}, function(data) {
		for (i=0;i<data.data.length;i++){
			if (i % 2){color ='<%= $white %>'}else{color='<%= $l_gray %>'}
			$('<tr onmouseover="<% if defined?(row_hover) != nil %><%= raw row_hover %><% end %>" class="gt_row_<%= name %>" id="gt_row_id_<%= name %>_'+data.data[i].id+'" style="background:'+color+'">'+
			<% 
			count_row=0
			header.each do |item| 
				count_row=count_row+1
				onclick=""
					pointer=""
					if item[:onclick] != ''
							onclick=item[:onclick]
							pointer="cursor:pointer"
					end
				if count_row != header.count	
					
				%>
				'<td onclick="<%= raw onclick %>" id="gt_<%= name %>_'+i+'_<%= count_row %>" style="<%= item[:width] %>;<%= pointer %>"><%= raw item[:value] %></td>'+
				<% 	else %>
				'<td onclick="<%= raw onclick %>" id="gt_<%= name %>_'+i+'_<%= count_row %>" style="width:calc(<%= item[:width].split(":")[1] %>);<%= pointer %>"><%= raw item[:value] %></td>'+
				<% 	end  %>
			<% end %>
			'</tr>').appendTo("#gt_body_<%= name %>")
		}
		gt_result_data_<%= name %>=data
		all_pages=Math.ceil(data.count/<%= offset %>)
		if (all_pages == 0){all_pages = 1}
		document.getElementById('gt_all_pages_<%= name %>').value=all_pages
		document.getElementById('gt_selected_page_<%= name %>').value=gt_last_page_<%= name %>
		gt_check_load_<%= name %> = 0
		<% if action_after == 1 %>
			gt_action_after_build_<%= name %>(gt_result_data_<%= name %>)
		<% end %>
		if (data.count > 0){
			$(".table_body_container").niceScroll(scroll_settings).resize();
		}
		show_loading(0)
	}).fail(function(error) {
		show_loading(0)
		console.log(error)
		error_show(error)
  	})
}

function gt_change_page_<%= name %>(){
	if (parseInt(document.getElementById('gt_selected_page_<%= name %>').value) > 0 && parseInt(document.getElementById('gt_selected_page_<%= name %>').value) <= parseInt(document.getElementById('gt_all_pages_<%= name %>').value)){
		page=document.getElementById('gt_selected_page_<%= name %>').value
		gt_last_page_<%= name %>=page
		gt_build_table_<%= name %>(gt_last_sort_<%= name %>)
	}else{
		document.getElementById('gt_selected_page_<%= name %>').value=logs_last_page
		gt_change_page_<%= name %>()
	}
}
function gt_add_page_<%= name %>(){
	if (parseInt(document.getElementById('gt_selected_page_<%= name %>').value) !== parseInt(document.getElementById('gt_all_pages_<%= name %>').value)){
		document.getElementById('gt_selected_page_<%= name %>').value=parseInt(document.getElementById('gt_selected_page_<%= name %>').value)+1
		gt_change_page_<%= name %>()
	}
}

function gt_remove_page_<%= name %>(){
	if (parseInt(document.getElementById('gt_selected_page_<%= name %>').value) !== 1){
		document.getElementById('gt_selected_page_<%= name %>').value=parseInt(document.getElementById('gt_selected_page_<%= name %>').value)-1
		gt_change_page_<%= name %>()
	}
}
function gt_last_page_select_<%= name %>(type){
	if (type == 0){
		gt_last_page_<%= name %>=1
		gt_build_table_<%= name %>(gt_last_sort_<%= name %>)
	}else{
		gt_last_page_<%= name %>=parseInt(document.getElementById('gt_all_pages_<%= name %>').value)
		gt_build_table_<%= name %>(gt_last_sort_<%= name %>)
	}
}
function gt_export_table_<%= name %>(){
		gt_header_for_report=[
			<% header.each do |item|  %>
				<% if item[:filter] != 'none' %>
					{'name':'<%= item[:row_name] %>', 'field': '<%= item[:filter] %>'},
				<% end %>
			<% end %>
		]
		window.open('<%= query %>?'+
			'order='+gt_last_sort_<%= $gt_name %>+
			'&time='+<%= time %>+
			'&start_time='+calendar_from_date.date_format()+
			'&end_time='+calendar_to_date.date_format()+
			'&page='+gt_last_page_<%= name %>+
			'&offset='+<%= offset %>+
			<% add_params.split(',').each do |param| %> 
				<% if param.split(':')[0] != nil %>
					'&<%= raw param.split(':')[0].strip %>='+<%= raw param.split(':')[1].strip %>+
				<% end %>
			<% end %>
			'&headers='+JSON.stringify(gt_header_for_report)+
			'&export=1' ,'_self')
}
$(document).ready(
	function() { 
		$(".table_body_container").niceScroll(scroll_settings);
		<% if defined?(auto_load) == nil  %>
		gt_build_table_<%= name %>(gt_last_sort_<%= name %>)
		<% end %>
	}
);
</script>