{% 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="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>
        {% if inherited_view %}
        	{{modulename|trans}} related through {{parent_module|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 %}
        <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"> /* HIDING SEARCH Because it does not work - links to a listview page, so its not possible to select anything */
	       		{% 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 id="list_div">
	       
	       <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}}/{{app.modules[modulename].route.route}}/popup/{% 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}}/popup/{{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}}/popup/{{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=" 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 %}")'>
          	
            
			
			
			
          	{% for fieldname in list_fields %}
            <td  class="{{fieldname}}">{{record[fieldname]|raw}}  </td>
            {% endfor %}
            
          </tr>
          {% endfor %}
          
        </tbody>
	</table>
	
	<br>
	
	
	
	
	
	      </div>
	
	{% endif %}
	
	<div class="row">
		{% 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}}/popup/{% 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}}/popup/{{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}}/popup/{{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"|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>
	{% 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}}/popup?field={{target_field}}&order="+order+"&sort="+$(this).attr("data-sort"));
	});
	
	{% endif %}
	
	function setParentRelated(id,label) {
		try {
		    window.opener.setRelatedFieldValueCustomer("{{target_field}}",id,label);
		}
		catch (err) {
			console.log(err);
		}
		window.close();
		return false;
	}
	
	function searchRecords(){
		var sTerm = $(".fuzzy-search").val();
		var sCol = $("#search-col").val();
		gotoPage("{{app.config.base_url}}/{{current_route}}/list?sc="+sCol+"&sv="+sTerm);
		
	}
	
	
</script>

{% endblock %}