{% extends "base.html" %}
{% block main_content %}
	<div class="container-fluid">
		<div class="row">
		<h3 class="col-6"><center>{{page_title}}</center></h3>
		{% if 'Create' not in page_title %}
			<h3 class="col-6"><center>Books in Series</center></h3>
		{% endif %}
		</div class="row">
		<div class="row">
			<div class="col-6">
			<form class="form form-inline col-12" action="" method="POST">
				{{ form.csrf_token }}
				{{ form.id }}
				<div class="form-row col-12 input-group">
				{{ form.title.label( class="col-3 justify-content-end" ) }}
				{{ form.title( class="form-control col-9" ) }}
				</div class="form-row">
				<div class="form-row col-12 input-group">
				{{ form.num_books.label( class="col-3 justify-content-end" ) }}
				{{ form.num_books( class="form-control col-9" ) }}
				</div class="form-row">
				<div class="form-row col-12 input-group">
				{{ form.calcd_rating.label( class="col-3 justify-content-end" ) }}
				{{ form.calcd_rating( class="form-control col-9", readonly="true" ) }}
				</div class="form-row">
				<div class="form-row col-12 input-group">
				{{ form.note.label( class="col-3 justify-content-end" ) }}
				{{ form.note( class="form-control col-9", rows="5" ) }}
				</div class="form-row">
				<div class="row col-12">
				<br>
				</div class="row">
				<div class="form-row col-12">
					{{ form.submit( class="btn btn-primary offset-3 col-2" )}}
					{% if 'Edit' in page_title %}
                        {{ form.delete( class="btn btn-outline-danger col-2" )}}
                    {% endif %}
				</div class="form-row">
			</form>
			</div class="col-6">
			<div class="col-6">
				{% if 'Create' not in page_title %}
					<div id="books_for_series_bit">
					</div id="books_for_series_bit">
                 {% endif %}
			</div class="col-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 %}