{% load humanize %}
{% load fr_display %}

<h2>
    {% include 'snippets/avatar.html' with user=user %}
    Your thoughts on
    <a href="/book/{{ book.fedireads_key }}">{{ book.title }}</a>
    by {% include 'snippets/authors.html' with book=book %}
</h2>

<div class="tabs secondary">
    <div class="tab active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
        <a href="{{ book.absolute_id }}/review" onclick="tabChange(event)">Review</a>
    </div>
    <div class="tab" data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
        <a href="{{ book.absolute_id }}/comment" onclick="tabChange(event)">Comment</a>
    </div>
    <div class="tab" data-id="tab-quote-{{ book.id }}" data-category="tab-option-{{ book.id }}">
        Quote
    </div>
</div>

<div class="book-preview row">
    <div class="cover-container">
        {% include 'snippets/book_cover.html' with book=book %}
    </div>
    <form class="tab-option-{{ book.id }} review-form" name="review" action="/review/" method="post" id="tab-review-{{ book.id }}">
        {% csrf_token %}
        <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
        {{ review_form.as_p }}
        <button type="submit">post review</button>
    </form>

    <form class="hidden tab-option-{{ book.id }} review-form" name="comment" action="/comment/" method="post" id="tab-comment-{{ book.id }}">
        {% csrf_token %}
        <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
        {{ comment_form.as_p }}
        <button type="submit">post comment</button>
    </form>
</div>