{% extends "base.html" %}
{% block main_content %}
	<div class="container">
		<h3 class="col-lg-12"><center>{{page_title}}</center></h3>
		<div class="row">
			<div class="col-lg-8">
			<form class="form form-inline col-lg-12" action="" method="POST">
				{{ form.csrf_token }}
				{{ form.id }}
				<div class="form-row col-lg-12">
				{{ form.firstnames.label( class="col-lg-2" ) }}
				{{ form.firstnames( class="form-control col-lg-10" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.surname.label( class="col-lg-2" ) }}
				{{ form.surname( class="form-control col-lg-10" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.date_lent.label( class="col-lg-2" ) }}
				{{ form.date_lent( class="form-control col-lg-10" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.contact_details.label( class="col-lg-2" ) }}
				{{ form.contact_details( class="form-control col-lg-10", rows="5" ) }}
				</div class="form-row">
				<div class="row col-lg-12">
				<br>
				</div class="row">
				<div class="form-row col-lg-12">
					{{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
					{{ form.submit( class="btn btn-primary col-lg-2" )}}
				</div class="form-row">
			</form>
			</div class="col-lg-8">
			<div class="col-lg-4">
				<div id="books_for_loan_bit">
				</div id="books_for_loan_bit">
			</div class="col-lg-4">
		</div class="row">
	</div class="container">
{% endblock main_content %}
{% block script_content %}
	<script>
		$(document).ready( function() {
			$("#books_for_loan_bit").load("/books_for_loan/" + {{form.data.id}})
		} )
	</script>
{% endblock script_content %}