{% extends 'layout.html' %}
{% block content %}
<div id="content">
    <div>
        <div class="book-preview">
            <img class="book-cover" src="/static/images/med.jpg">
            <h1>{{ book.data.title }}</h1>
            by {{ book.authors.first.data.name }}
            {{ rating }} stars
        </div>

        <h3>Leave a review</h3>

        <form class="review-form" name="review" action="/review/" method="post">
            <input type="hidden" name="book" value="{{ book.openlibrary_key }}"></input>
            <label for="name">Title:
                <input type="text" name="name"></input>
            </label>
            <label for="content">
                <textarea name="content"></textarea>
            </label>
            <label for="rating">Your rating (1-5)
                <input type="number" name="rating"></input>
            </label>
            <button type="submit">Post review</button>
        </form>
    </div>

    <div class="reviews">
        <h2>Reviews</h2>
        {% if not reviews %}
        <p>No reviews yet!</p>
        {% endif %}
        {% for review in reviews %}
        <div class="review">
            <h4>{{ review.name }}
                <small>{{ review.rating }} stars, by {{ review.user.username }}</small>
            </h4>
            <blockquote>{{ review.review_content }}</blockquote>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}