{% extends "base.html" %}
{% block main_content %}
	<div class="container-fluid">
		<div class="row">
		<h3 class="col-lg-6"><center>{{page_title}}</center></h3>
		{% if 'Create' not in page_title %}
			<h3 class="col-lg-6"><center>Books in Series</center></h3>
		{% endif %}
		</div class="row">
		{% if message|length %}
			<div class="row alert alert-{{alert}}">
			{{message}}
			</div>
		{% endif %}
		<div class="row">
			<div class="col-lg-6">
			<form class="form form-inline col-lg-12" action="" method="POST">
				{{ form.csrf_token }}
				{{ form.id }}
				<div class="form-row col-lg-12">
				{{ form.title.label( class="col-lg-3 justify-content-end" ) }}
				{{ form.title( class="form-control col-lg-9" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.num_books.label( class="col-lg-3 justify-content-end" ) }}
				{{ form.num_books( class="form-control col-lg-9" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.calcd_rating.label( class="col-lg-3 justify-content-end" ) }}
				{{ form.calcd_rating( class="form-control col-lg-9", readonly="true" ) }}
				</div class="form-row">
				<div class="form-row col-lg-12">
				{{ form.note.label( class="col-lg-3 justify-content-end" ) }}
				{{ 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">
					{% if 'Create' in page_title %}
						{{ form.submit( class="btn btn-primary offset-lg-3 col-lg-2" )}}
                    {% else %}
                        {{ form.delete( class="btn btn-outline-danger offset-lg-3 col-lg-2" )}}
						{{ form.submit( class="btn btn-primary col-lg-2" )}}
                    {% endif %}
				</div class="form-row">
			</form>
			</div class="col-lg-6">
			<div class="col-lg-6">
				{% if 'Create' not in page_title %}
					<div id="books_for_series_bit">
					</div id="books_for_series_bit">
                 {% endif %}
			</div class="col-lg-6">
		</div class="row">
	</div class="container">
{% endblock main_content %}
{% block script_content %}
	<script>
		$(document).ready( function() {
			$("#books_for_series_bit").load("/books_for_series/" + {{form.data.id}})
		} )
	</script>
{% endblock script_content %}