{% extends "layout.html" %}
{% block body %}
{% if book %}
<script type="text/javascript">
$(document).ready(function(){
	$('input.typeahead').typeahead({
		name: 'accounts',
		source: function (query, process) {
			$.ajax({
				url: '{{ url_for('get_authors_json') }} ',
				type: 'POST',
				dataType: 'JSON',
				data: 'query=' + query,
				success: function(data) {
					console.log(data);
					process(data);
				}
			});
		}
	});
});  
</script>

<div class="col-sm-3 col-lg-3 col-xs-12">
  <div class="cover">
    {% if book.has_cover is defined %}
      <img src="{{ url_for('get_cover', cover_path=book.path) }}" />
    {% endif %}
  </div>
</div>
<div class="col-sm-8">
  <form role="form" action="{{ url_for('edit_book', book_id=book.id) }}" method="post">
    <div class="form-group">
      <label for="book_title">Book Title</label>
      <input type="text" class="form-control" name="book_title" id="book_title" value="{{book.title}}">
    </div>
    <div class="form-group">
      <label for="bookAuthor">Author</label>
        {% if book.authors|length > 1 %}
          {% for author in book.authors %}
            <p>{{author.name.join(" & ")}}</p>
          {% endfor %}
        {% endif %}
      <input type="text" data-provide="typeahead" class="form-control typeahead" name="author_name" id="bookAuthor" autocomplete="off" value="{{book.authors[0].name}}">
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <textarea class="form-control" name="description" id="description" rows="7">{% if book.comments %}{{book.comments[0].text}}{%endif%}</textarea>
    </div>
    <div class="form-group">
      <label for="tags">Tags</label>
      <input type="text" class="form-control" name="tags" id="tags" value="{% for tag in book.tags %}{{tag.name.strip()}}, {% endfor %}">
    </div>

      <div class="form-group">
        <label for="series">Series</label>
        <input type="text" class="form-control" name="series" id="series" value="{% if book.series %}{{book.series[0].name}}{% endif %}">
      </div>
      <div class="form-group">
        <label for="series_index">Series id</label>
        <input type="text" class="form-control" name="series_index" id="series_index" value="{{book.series_index}}">
      </div>
      <div class="form-group">
        <label for="rating">Rating</label>
        <input type="text" class="form-control" name="rating" id="rating" value="{% if book.ratings %}{{book.ratings[0].rating}}{% endif %}">
      </div>
      <div class="form-group">
        <label for="cover_url">Cover URL (jpg)</label>
        <input type="text" class="form-control" name="cover_url" id="cover_url" value="">
      </div>
    <div class="checkbox">
      <label>
        <input name="detail_view" type="checkbox" checked> view book after edit
      </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
{% endif %}
{% endblock %}