{% extends "base.html" %}
{% block main_content %}

<script>
function RemoveAuthorFromBook(num) {
	console.log("remove an author at slot: " + num )
	$('#auth-div-'+num).remove()
}
function AddAuthorToBook(num) {
	console.log("insert a new author at slot: " + num )
	div = `
	<div id="auth-div-NUM" class="col input-group px-0">
			<div class="input-group-prepend">
				<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook(NUM)"><i class="fas fa-minus"></i></button>
			</div>
			<select class="form-control" name="author-NUM" id="author-NUM">
				{% for auth in author_list %}
					{% set aname=auth.surname+", "+auth.firstnames %}
					<option value="{{auth.id}}">{{aname}}</option>
				{% endfor %}
			</select>
		</div>
	`
	div=div.replace( /NUM/g, num )
	$('#auth-div-'+(num-1)).after( div )
	new_add_func_str='AddAuthorToBook('+(num+1)+')'
	$('#author-plus').attr( 'onclick', new_add_func_str )
}
</script>

{% set keys = [ 'title', 'author', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
<div class="container-fluid">
	{% if message|length %}
		<div class="row alert alert-{{alert}}">
		{{message}}
		</div>
	{% endif %}
	<div class="row">
		<form role="form" class="form col-lg-10" action="" method="POST">
			{{ book_form.id }}
        	{{ book_form.csrf_token }}
			{% if b.parent|length %}
				<div class="form-row">
					<label class="col-lg-2 col-form-label bg-secondary text-white">Parent Book:</label>
					<div class="col">
						<button disabled class="col btn btn-outline-primary">
							<i><a href="/book/{{b.parent[0].id}}">{{b.parent[0].title}}</a></i>
						</button>
					</div>
				</div>
			{% endif %}
			{% for key in keys %}
				<div class="form-row">
					<label for="{{key}}" class="col-lg-2 col-form-label">{{key}}:</label>
					{% if key == "genre" %}
							<div class="form-row col-lg-10">
								{% for genre in genre_list %}
									<div class="form-control col" style="margin-left:5px;margin-right:-5px;">
										<input id="genre-{{genre.id}}" name="genre-{{genre.id}}" type="checkbox"
										{% for book_g in books.genre %}
											{% if book_g['name'] == genre.name %}
												checked
											{% endif %}
										{% endfor %}
										></input>
										<label style="display:inline" for="{{genre.name}}" class="col-form-label">{{genre.name}}</label>
									</div>
								{% endfor %}
							</div>
					{% elif key == "author" %}
						<div class="form-row col mx-0">
							{% set cnt = namespace(idx=0) %}
							{% for objects in books[key] %}
								<div id="auth-div-{{cnt.idx}}" class="col input-group px-0">
									{% if cnt.idx > 0 %}
										<div class="input-group-prepend">
											<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})"><i class="fas fa-minus"></i></button>
										</div>
									{% endif %}
									<select class="form-control" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
									{% for auth in author_list %}
										{% set aname=auth.surname+", "+auth.firstnames %}
										<option value="{{auth.id}}"
										{% if books.author[cnt.idx].id == auth.id %}
											selected
										{% endif %}
										>{{aname}}</option>
									{% endfor %}
									</select>
								</div class="col">
								{% set cnt.idx = cnt.idx+1 %}
							{% endfor %}
							<div class="input-group-append">
								<button id="author-plus" class="btn btn-outline-success" type="button" onClick="AddAuthorToBook({{cnt.idx}})"><i class="fas fa-plus"></i></button>
							</div>
						</div class="form-row">
					{% else %}
						<div class="col">
							{% set rows=4 %}
							{% if key == "notes" %}
								{% set rows=2 %}
							{% endif %}
							{% if b.parent|length and 
								(key == 'publisher' or key == 'owned' or key == 'covertype' 
								or key == 'condition' or key == 'blurb' )  %}
								{{book_form[key](class="form-control", value=books[key], rows=rows, disabled="disabled" )}}
							{% else %}
								{{book_form[key](class="form-control", value=books[key], rows=rows )}}
							{% endif %}
						</div class="col">
					{% endif %}
				</div class="form-row">
			{% endfor %}
		{% if books.series|length %}
			<div class="form-row">
				<label for="series" class="col-lg-2 col-form-label">Series:</label>
				<table>
				{% for s in books.series %}
					<tr><td>
					{% if SeriesBookNum( s.id, books.id ) %}
						<label class="form-control-plaintext">Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in <a href="/series/{{s.id}}">{{s.title}}</a></label>
					{% else %}
						<label class="form-control-plaintext">Contains books in <a href='/series/{{s.id}}'>{{s.title}}</a></label>
					{% endif %}
					</td></tr>
				{% endfor %}
				</table>
			</div>
		{% endif %}
		{% if books.child_ref|length %}
			<div class="form-row">
				<label class="col-lg-2 col-form-label">Sub Books:</label>
				<div class="col" id="sub_book_content">
				</div>
			</div>
		{% endif %}
		<div class="form-row col-lg-12">
			{{ book_form.delete( class="btn btn-outline-danger offset-lg-2 col-lg-2" )}}
			{{ book_form.submit( class="btn btn-primary col-lg-2" )}}
		</div class="form-row">
		</form>
		{% if books.loan|length %}
				<div class="col">
					<div class="card border-primary">
					  <div class="card-header bg-primary text-white">Loaned to</div>
						<div class="card-body text-primary">
							<h5 class="card-title">{{books.loan[0].firstnames}} {{books.loan[0].surname}}</h5>
						    <p class="card-text">
								When: {{books.loan[0].date_lent}}<br>
								Contact: {{books.loan[0].contact_details}}
						</div>
					</div>
				</div>
			</div>
		{% endif %}

	</div class="row">
</div class="container">

{% endblock main_content %}
{% if books.child_ref|length %}
	{% block script_content %}
		<script>
			$(document).ready( function() {
				$("#sub_book_content").load("/subbooks_for_book/{{books.id}}")
			} )
		</script>
	{% endblock script_content %}
{% endif %}