{% extends 'kit_template.html' %}

{% block kit_content %}
<div class="row">
	<div class="span6">
		<table class="table table-sm" id="kit-table">
		<thead>
		<tr><th>Type</th><th>Name</th><th>Size</th><th></th></tr>
		</thead>
		<tbody>
		{% for kit in kits %}
			<tr><td>{{ kit.type }}</td><td>{{ kit.name }}</td><td>{{ kit.size }}</td><td><a href="#" data-pk={{kit.pk}} class="kit-add btn btn-small"><i class="fa fa-plus-circle"></i></a> </td></tr>
		{% endfor %}
		</tbody>
		</table>
	</div>

	<div class="span3">
		<div class="loan-create">
		<p class="loan-intro">Click on the <i class="fa fa-plus-circle"></i> button to build a list of kit to loan.</p>
		<table id="kit-loan" class="table table-sm loan-hidden">
		<tr></tr>
		</table>

		<a class="loan-hidden btn" id="loan-next-button" href="#"><i class="fa fa-arrow-right"></i> Next</a>
		</div>
	</div>
</div>
{% endblock %}

{% block post_head %}
<!-- This is broken, datatables is now in lib/ but left unfixed as this section is NYI -->
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="/static/js/jquery.dataTables.min.js"></script>

{% endblock %}

{% block closing_js %}
<script type="text/javascript">
	$(document).ready(function(){
		var kit_loan_list = []
		$('.loan-hidden').hide()
    	$('#kit-table').dataTable();
    	function update_next_button() {
    		var arrayLength = kit_loan_list.length;
    		var a_href = "?pks="
			for (var i = 0; i < arrayLength; i++) {
    			a_href = a_href + kit_loan_list[i] + ",";
			}
			a_href = a_href.substring(0, a_href.length-1);
			$('#loan-next-button').attr('href',a_href);
    	}
    	$('.kit-add').click(function(){
    		$('.loan-intro').hide()
    		$('.loan-hidden').show()
    		var kit_pk = $(this).attr('data-pk');
    		kit_loan_list.push(kit_pk)
    		$(this).hide();
			$('#kit-loan tr:last').after('<tr><td>'+kit_pk+'</td></tr>');
			update_next_button();
		});
	});

</script>
{% endblock %}