{% 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="card material-table ">
      <div class="table-header">
        <span class="table-title"><a href="#" class="btn-floating grey waves-effect waves-light search-toggle hide"><i class="material-icons">search</i></a>
        {% if inherited_view %}
        	{{modulename|trans}} {{"LBL_RELATED_MULTIPLE"|trans|raw}} through {{parent_module.route.label|trans}} 
        {% else %}
        	{{app.translator.trans('LBL_RECORDS_LIST')}} <small>{% if total_records>0 %}page {{current_page}} of {{total_pages}} - {% endif %}Records: {{total_records}}</small>
        {% endif %}
        </span>
        <div class="actions">
	       		{% if inherited_view == false %}
	       		<select id="search-col">
		       		{% for fieldname in grid_fields %}
		       		<option value="{{fieldname}}">{{fieldname|trans}}</option>
		       		{% endfor %}  
	       		</select>&nbsp;
	       		{% endif %}
				<div class="input-field ">
					<input type="text" class="fuzzy-search" id="search-term" placeholder="{{'LBL_SEARCH'|trans}} . . .">
				</div>&nbsp;&nbsp;
          <a href="{% if inherited_view %}#{% else %}javascript:searchRecords(){% endif %}" class="btn-floating {{themebasiccolor}} waves-effect waves-light search-toggle "><i class="material-icons">search</i></a>
        </div>
        
        
        </div>

        <div style="background-color:#fff;">
	       <div class="row">
				<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>
		</div>		
      </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]|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 %} 
							<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</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 {{current_page}} of {{total_pages}} - {%endif%}Total Records: {{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</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 %}