{% extends 'themes/'~layout_dir~'/layout.html' %}
{% block body %}

<div class="row">
	{% include 'themes/default/modules/PortalModule/module.actions.html' %}
</div>



  <div id="admin" class="col s12">



<div id="list_div">
	
<div class="row">
	
	

	<ul class="list">
	
	{% if module_config.grid.entries_limit is divisible by(3) %}
		{% set row_limit = 3 %}
		{% set col_size = 4 %}
	{% elseif module_config.grid.entries_limit > 4 %}
		{% set row_limit = 4 %}
		{% set col_size = 3 %}
	{% elseif module_config.grid.entries_limit == 1 %}
		{% set row_limit = 1 %}
		{% set col_size = 12 %}
	{% else %}
		{% set row_limit = 2 %}
		{% set col_size = 6 %}
	{% endif %}
		
	<div class="row">
	{% for record in records %}
	
	<li>
		<div class="col s12 m{{col_size}}">
			<div class="card darken-1" style="background: #fff; cursor: pointer" >
				<div class="card-content" onclick="gotoPage('{{app.config.base_url}}/{{current_route}}/{{record.id}}')">
					{% for fieldname in grid_fields %}
						{% if loop.index==1 and record[fieldname] is defined %}
					        {% if fieldname == "imagename" %}
						        {% for imagename,imagedetails in record["images"][fieldname] %}
						            <img src="data:image/png;base64,{{imagedetails['content']}}" style="max-width:100%"><hr>
						        {% endfor %}
						    {% else %}
					        <h4 class="titleEllipsis">{{record[fieldname]|raw}}</h4>
					        {% endif %}	
					    {% endif %}
					{% endfor %}
					
				
					<ul class="collection">
						        {% for fieldname in grid_fields %}
						        	{% if loop.index>1  and record[fieldname] is defined %}					        		
					            		<li class="{{fieldname}} collection-item ">
					            		{% if fieldname == "imagename" %}
						            		{% for imagename,imagedetails in record["images"][fieldname] %}
						            			<img src="data:image/png;base64,{{imagedetails['content']}}" style="max-height:250px"><hr>
						            		{% endfor %}
						            	{% else %}
					            		<b>{{fieldname|trans}}:</b><span class=" flow-text">&nbsp;&nbsp;{{record[fieldname]|trans|raw}}</span>				            		{% endif %}
					            		</li>			            		
					            	{% endif %}
					            {% endfor %}
					</ul>
				</div>	   
		        <div class="card-action center-align">
	               
	               	<a class="btn-floating {{themebasiccolor}} btn-small waves-effect waves-light" onclick="gotoPage('{{app.config.base_url}}/{{current_route}}/{{record.id}}')"><i class="large material-icons">zoom_in</i></a>
		            
		            {% if edit_enabled is defined and edit_enabled %}
					<a class="btn-floating yellow darken-1 btn-small waves-effect waves-light" onclick="gotoPage('{{app.config.base_url}}/{{current_route}}/{{record.id}}/edit')" ><i class="large material-icons">mode_edit</i></a>
					{% endif %}
					
					{% if pdf_download_enabled is defined and pdf_download_enabled and app.download_enabled %} 
							<a class="btn-floating red btn-small waves-effect waves-light" href="{{app.config.base_url}}/{{current_route}}/{{record.id}}/download-pdf"><i class="material-icons left">picture_as_pdf</i>{{"Download PDF"|trans}}</a>
					{% endif %}
	            </div>
			</div>
		</div>
	
	</li>
	
	{% if loop.index is divisible by(row_limit) %}</div><div class="row">{% endif %}
	
	{% endfor %}
	</div>
	 
	</ul>
	
	
		<div class="col s12 center-align">
			<div class="card material-table " style="background:#fff;">
				
				<div class="col s12 center-align">
					<ul class="pagination">
						{% if not inherited_view %}
						
						{% set show_pages = 2 %}
						{%if current_page>show_pages+1%}
						<li><a href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/grid/{% if app.request.queryString!="" %}?{{app.request.queryString}}{%endif%}')"><i class="material-icons">chevron_left</i></a></li>
						{%endif%}
						{% for i in 1..total_pages %}
							{% if i>(current_page-3) and i<(current_page+3) %}
						    <li class="waves-effect {%if current_page==i %}active {{themebasiccolor}}{%endif%}"><a href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/grid/{{i}}/{% if app.request.queryString!="" %}?{{app.request.queryString}}{%endif%}')">{{i}}</a></li>
						    {% endif %}
						{% endfor %}
						{%if current_page<(total_pages-show_pages)%}
						<li><a href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/grid/{{total_pages}}/{% if app.request.queryString!="" %}?{{app.request.queryString}}{%endif%}')"><i class="material-icons">chevron_right</i></a></li>
						{%endif%}
						
						{%endif%}
					</ul>
				</div>
				
				<div class="col s12 center-align">
					<p>{% if not inherited_view and total_pages > 0 %}{{"Showing page"|trans}} {{current_page}} of {{total_pages}} - {%endif%}{{"Total Records"|trans}}: {{total_records}}</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>

	  
	  
  {% if create_enabled is defined and create_enabled %} 
		<div class="col s12 right-align">
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="{{app.request.requestUri}}create"><i class="material-icons large left">add</i>{{"Create New"|trans}}</a>
		</div>
	{% endif %}

</div>	
</div>

{% endblock %}
{% block footerscripts %}


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.fuzzysearch.js/0.1.0/list.fuzzysearch.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>

<script>
	
	
    {% if inherited_view %}

	var options = {
	  valueNames: {{grid_fields|json_encode()|raw}},
	  page: {{entries_limit}},
	  pagination: [{
	      name: "pagination",
	      paginationClass: "pagination",
	      innerWindow: 1,
	      left: 1,
	      right: 2
	    }]
	};


	var userList = new List('list_div', options);

	$(".search-toggle").click(function(){
		$("#list_div .search").toggleClass("hide");
	})
    

    {% else %}
    
    function searchRecords(){
		var sTerm = $(".fuzzy-search").val();
		var sCol = $("#search-col").val();
		gotoPage("{{app.config.base_url}}/{{current_route}}/list?sc="+sCol+"&sv="+sTerm);
		
	}
	{% endif %}

</script>

{% endblock %}