{% extends 'base.html' %}
<!-- browse_view.html -->
{% load crispy_forms_tags %}

{% block content %}
<style>
.row1 {
	background-color: #ffffff;
}
.row2 {
	background-color: #cceeee;
}
.clickable-row {
	cursor: pointer;
}
.row1:hover {
	background-color: #8ccf84;
}
.row2:hover {
	background-color: #8ccf84;
}
</style>

<script>
	$(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});
</script>
<table width="80%"><tr valign="top"><td align="left">
{% if search %}
<h3>Showing: {{ page_result_count }} of {{ total_result_count }} result(s)
{% else %}
<h3>{{ total_result_count }} record(s), 
{% endif %}
page {{ page }} of {{ all_pages_count }}.</h3></td>
<td><font size="-1">Jump to page number: <input size="5" type="text" id="browsepagenumber"><button type="button" value="go" onClick='javascript: window.location.href="{{ base }}browse?page="+$("#browsepagenumber").val();'>Go</button></font></td>
<td align="center">
	{% if page > 1 and less %}
	<button type="button" onclick="go_to_page({{previouspage}});" value="Previous" >Previous</button>
	{% endif %}
	{% if more %}
	<button type="button" onclick="go_to_page({{nextpage}});" value="Next" >Next</button>
	{% endif %}
</td></tr></table><br/>
<table cellpadding="5px" width="80%">
	<tr style="background-color: #99ffcc;">
		<th>Id</th><th>Cohort</th><th>Last Name</th><th>First Name</th><th>Email</th><th>Status</th><th>Account</th><th>Balance</th></tr>
	{% for student in students %}

<tr class="clickable-row clicable-row {% cycle 'row1' 'row2' %}" valign="bottom" id="student-tr-{{ student.id }}" data-href="detail/{{ student.id }}/{{ page }}/{{ forloop.counter0 }}">
		<td><span class="label">Id &nbsp; </span><span class="field">{{student.id}}</span> &nbsp; &nbsp; </td>
      <td><span class="field">{{student.cohort}}</span></td>
     <td><span class="field">{{student.last_name}}</span></td>
     	<td><span class="field">{{student.first_name}}</span></td>
      <td><span class="field">{{student.email_addr}}</span></td>
      <td><span class="field">{{student.status}}</span></td>
      <td><span class="field">{{student.paystatus}}</span></td>
      <td><span class="field"><a href="printablestatement/{{student.id}}">{{student.balance|floatformat:2}}</a></span></td>
      <td>
      	{% if student.flag > 0 %}
      	<img src="/static/flag.png" width="32px" height="41px" />
      	{% endif %}
      </td>
</tr>


{% endfor %}
{% if smalllist %}
<tr><td align="center" colspan="5"><font size="1"><span id="studentliststatus">END OF Student LIST</span></font></td></tr>
{% else %}
<tr><td align="center" colspan="5">
	{% if page > 1 and less %}
	<button type="button" onclick="go_to_page({{previouspage}});" value="Previous" >Previous</button>
	{% endif %}
	{% if more %}
	<button type="button" onclick="go_to_page({{nextpage}});" value="Next" >Next</button>
	{% else %}
	<font size="1"><span id="studentliststatus">END OF Student LIST</span></font>
	{% endif %}
</td></tr>
{% endif %}
</table>

<br/><br/><br/><br/>

<hr />

Use this form to find student records.
<script>
	function go_to_page(num) {
		window.location.href='browse?page='+num;
	}
	
</script>

{% endblock %}