{% extends "base.html" %}
{% block main_content %}
	<div class="container">
		<h3 class="col-lg-12"><center>Series</center></h3>
		{% if message|length %}
			<div class="row alert alert-{{alert}}">
			{{message}}
			</div>
		{% endif %}
		<div class="row">
			<div class="col-lg-8">
			<form class="form form-inline col-lg-12" action="" method="POST">
				{{ series_form.csrf_token }}
				{{ series_form.id }}
				<div class="form-row col-lg-12">
				{{ series_form.title.label( class="col-lg-3 justify-content-end" ) }}
				{{ series_form.title( class="form-control col-lg-9" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ series_form.num_books.label( class="col-lg-3 justify-content-end" ) }}
				{{ series_form.num_books( class="form-control col-lg-9" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ series_form.calcd_rating.label( class="col-lg-3 justify-content-end" ) }}
				{{ series_form.calcd_rating( class="form-control col-lg-9", readonly="true" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ series_form.note.label( class="col-lg-3 justify-content-end" ) }}
				{{ series_form.note( class="form-control col-lg-9", rows="5" ) }}
				</div class="form-row">
				<div class="row col-lg-12">
				<br>
				</div class="row">
				<div class="form-row col-lg-12">
					{{ series_form.delete( class="btn btn-outline-danger col-lg-2 offset-lg-1" )}}
					{{ series_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_series_bit">
				</div id="books_for_series_bit">
			</div class="col-lg-4">
		</div class="row">
	</div class="container">
{% endblock main_content %}
{% block script_content %}
	<script>
		$(document).ready( function() {
			$("#books_for_series_bit").load("/books_for_series/" + {{series_form.data.id}})
		} )
	</script>
{% endblock script_content %}