{% extends 'themes/default/config/layout.html' %}
{% block body %}



<div class="row">
	
	 


  	
  <div id="admin" 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>

        	{{app.translator.trans('LBL_RECORDS_LIST')}} <small>{% if total_records>0 %}page {{current_page}} of {{total_pages}} - {% endif %}Records: {{total_records}}</small>
  
        <a href="#" class="btn-flat  hide-on-small-only waves-effect waves-light search-toggle " search-id="list_div"><i class="material-icons small ">search</i></a></span>
        <div class="actions">
          <a href="#" class="btn-floating grey waves-effect waves-light search-toggle "><i class="material-icons">search</i></a>
        </div>
        
        
        
      </div>
      
      
      
    {% if total_records>0 %}
      
      
       <div id="list_div">
	       
	       <div class="row">
				<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}}/{{app.modules[modulename].route.route}}/myc-config/reference-popup/{{modulename}}/{% 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}}/myc-config/reference-popup/{{modulename}}/{{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}}/myc-config/reference-popup/{{modulename}}/{{total_pages}}/{% if app.request.queryString!="" %}?{{app.request.queryString}}{%endif%}')"><i class="material-icons">chevron_right</i></a></li>
						{%endif%}
						
					</ul>
				</div>
	       </div>
	       
      <div class="myc-responsive-container" >
	      
	     
  
	<table class=" bordered">
        <thead>
          <tr>
	          
	
          	  {% 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 onclick='setParentRelated("{{record.id}}","{% for fname in label_fields %}{{record[fname]}} {% endfor %} ({{modulename}})")'>
          	
            
			
			
			
          	{% for fieldname in list_fields %}
            <td  class="{{fieldname}}">{{record[fieldname]|raw}}  </td>
            {% endfor %}
            
          </tr>
          {% endfor %}
          
        </tbody>
	</table>
	
	<br>
	
	
	
	
	
	      </div>
	
	{% endif %}
	
	<div class="row">
		{% if 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}}/myc-config/reference-popup/{{modulename}}/{% 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}}/myc-config/reference-popup/{{modulename}}/{{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}}/myc-config/reference-popup/{{modulename}}/{{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 total_pages > 0 %}{{"Showing page"|trans}} {{current_page}} of {{total_pages}} - {%endif%}{{"Total Records"|trans}}: {{total_records}}</p>
				</div>
	       </div>
	
	
	
      </div>
    </div>
  </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>

	
	$("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}}/myc-config/reference-popup/{{modulename}}?field={{target_field}}&order="+order+"&sort="+$(this).attr("data-sort"));
	});
	
	function setParentRelated(id,label) {
		try {
		    window.opener.setRelatedFieldValueConfig("{{target_field}}",id,label);
		}
		catch (err) {}
		window.close();
		return false;
	}
	
</script>

{% endblock %}