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


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

<div class="row">
	
	 


	


  	
  <div id="list_div" class="col s12">
	
    <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}} related by {{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 list_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>
      
      
      
    {% if total_records>0 %}
      
      
       <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}}/list/{% 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}}/list/{{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}}/list/{{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 class="myc-responsive-container" >
	      
	     
  
	<table class=" striped">
        <thead>
          <tr>
	          
	
              		<th data-field="" style="width: 1%" class="no-sort">Actions</th>
			  
			  
          	  {% for fieldname in list_fields %}
              <th data-field="{{fieldname}}" class="sort {% if app.request.query.get('sort')==fieldname %}current-sort {% if app.request.query.get('order')=='desc' %}current-sort-desc{%endif%}{%endif%}" data-sort="{{fieldname}}" style="cursor:pointer; white-space: nowrap;">{% if app.request.query.get('sort')==fieldname %}
	              <i class="material-icons left">arrow_drop_{% if app.request.query.get('order')=='desc' %}up{%else%}down{%endif%}</i>
	              {%endif%}{{app.translator.trans(fieldname)}}</th>
              {% endfor %}               
	
          </tr>
        </thead>

        <tbody class="list">
          {% for record in records %}
          <tr>
          	
            <td style="white-space: nowrap;">
	            <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.request.requestUri}}{{record.id}}/download-pdf"><i class="material-icons left">picture_as_pdf</i>Download PDF</a>
				{% endif %}
				
			</td>
			
			
			
			
			
          	{% for fieldname in list_fields %}
            <td onclick="gotoPage('{{app.config.base_url}}/{{current_route}}/{{record.id}}')" class="{{fieldname}}" >
	            {% if record[fieldname] is defined %}
	            	{% if fieldname == "imagename" %}
					    {% for imagename,imagedetails in record["images"][fieldname] %}
					        <img src="data:image/png;base64,{{imagedetails['content']}}" style="max-height:50px; width: auto;">
					    {% endfor %}
					
					{% else %}
					    {% if fieldname == "progress" %}
				        <div class="determinate  {{themebasiccolor}} darken-4 " style="width: {{record[fieldname]|raw}}">{{record[fieldname]|raw}}  </div>
				         {% else %}   
				            {{record[fieldname]|raw}}
				        {% endif %}
				    {% endif %}
	            {% endif %}  </td>
            {% endfor %}
            
          </tr>
          {% endfor %}
          
        </tbody>
	</table>
	
	<br>
	
	
	
	
	
	      </div>
	
	{% endif %}
	
	<div class="row" style="background-color:#fff;">
		{% if not inherited_view and total_records > 0 %}
				<div class="col s12 center-align">
					<ul class="pagination">
						{% set show_pages = 2 %}
						{%if current_page>show_pages+1%}
						<li><a href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/list/{% 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}}/list/{{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}}/list/{{total_pages}}/{% if app.request.queryString!="" %}?{{app.request.queryString}}{%endif%}')"><i class="material-icons">chevron_right</i></a></li>
						{%endif%}
					</ul>
				</div>
				{%endif%}
				<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>
	
	
	
      </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.config.base_url}}/{{current_route}}/create"><i class="material-icons large left">add</i>Create New</a>
		</div>
	{% endif %}
</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: {{list_fields|json_encode()|raw}},
	  page: {{module_config.list_entries_limit}},
	  pagination: [{
	      name: "pagination",
	      paginationClass: "pagination",
	      innerWindow: 1,
	      left: 1,
	      right: 2
	    }]
	};


	var userList = new List('list_div', options);
	
	var tablelists = [];
	
	$( ".list-datatable" ).each(function( index ) {
		var newtablelists = new List($(this).attr("id"), options);
		tablelists.push(newtablelists);
	});
	
	
	$(".search-toggle").click(function(){
		$("#"+$(this).attr("search-id")+" .search").toggleClass("hide");
	});
	
	
	
	{% else %}
	
	$("th[data-sort]").click(function(){
		if($(this).hasClass("current-sort")){
			if($(this).hasClass("current-sort-desc")) var order = "asc";
			else var order = "desc";
		} 
		
		else var order = "asc";
		
		gotoPage("{{app.config.base_url}}/{{current_route}}/list?order="+order+"&sort="+$(this).attr("data-sort"));
	});
	
	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 %}