{% extends 'layout.html' %}
{% load fr_display %}
{% load humanize %}
{% block content %}

<div class="block">
    <div class="level">
        <h2 class="title level-left">
            <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
        </h2>

        {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
        <div class="level-right">
            <a href="{{ book.id }}/edit">
                <span class="icon icon-pencil">
                    <span class="is-sr-only">Edit Book</span>
                </span>
            </a>
        </div>
        {% endif %}
    </div>

    <div class="columns">
        <div class="column is-narrow">
            {% include 'snippets/book_cover.html' with book=book size=large %}
            {% include 'snippets/rate_action.html' with user=request.user book=book %}
            {% include 'snippets/shelve_button.html' %}

            {% if request.user.is_authenticated and not book.cover %}
            <div class="box p-2">
                <form name="add-cover" method="POST" action="/upload_cover/{{ book.id }}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="field">
                        <label class="label" for="id_cover">Cover:</label>
                        <input type="file" name="cover" accept="image/*" class="" id="id_cover">
                    </div>
                    <div class="field">
                        <button class="button is-small" type="submit">Add cover</button>
                    </div>
                </form>
            </div>
            {% endif %}

            <dl class="content">
            {% for field in info_fields %}
                {% if field.value %}
                <dt>{{ field.name }}:</dt>
                <dd>{{ field.value }}</dd>
                {% endif %}
            {% endfor %}
            </dl>
        </div>

        <div class="column">
            <div class="block">
                <h3 class="field is-grouped">{% include 'snippets/stars.html' with rating=rating %} ({{ reviews|length }} review{{ reviews|length|pluralize }})</h3>

                {% include 'snippets/book_description.html' %}

                {% if book.parent_work.edition_set.count > 1 %}
                <p><a href="/book/{{ book.parent_work.id }}/editions">{{ book.parent_work.edition_set.count }} editions</a></p>
                {% endif %}
            </div>

            {% for readthrough in readthroughs %}
            <div class="content block">
                <input class="toggle-control" type="radio" name="show-edit-readthrough" id="show-readthrough-{{ readthrough.id }}" checked>
                <div class="toggle-content hidden">
                    <dl>
                        {% if readthrough.start_date %}
                        <dt>Started reading:</dt>
                        <dd>{{ readthrough.start_date | naturalday }}</dd>
                        {% endif %}
                        {% if readthrough.finish_date %}
                        <dt>Finished reading:</dt>
                        <dd>{{ readthrough.finish_date | naturalday }}</dd>
                        {% endif %}
                    </dl>
                    <div class="field is-grouped">
                        <label class="button is-small" for="edit-readthrough-{{ readthrough.id }}">
                            <span class="icon icon-pencil">
                                <span class="is-sr-only">Edit read-through dates</span>
                            </span>
                        </label>
                        <label class="button is-small" for="delete-readthrough-{{ readthrough.id }}">
                            <span class="icon icon-x">
                                <span class="is-sr-only">Delete this read-through</span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="block">
                <input class="toggle-control" type="radio" name="show-edit-readthrough" id="edit-readthrough-{{ readthrough.id }}">
                <div class="toggle-content hidden">
                    <div class="box">
                        <form name="edit-readthrough" action="/edit-readthrough" method="post">
                            {% csrf_token %}
                            <input type="hidden" name="id" value="{{ readthrough.id }}">
                            <div class="field">
                                <label class="label">
                                    Started reading
                                    <input type="date" name="start_date" class="input" id="id_start_date-{{ readthrough.id }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
                                </label>
                            </div>
                            <div class="field">
                                <label class="label">
                                    Finished reading
                                    <input type="date" name="finish_date" class="input" id="id_finish_date-{{ readthrough.id }}" value="{{ readthrough.finish_date | date:"Y-m-d" }}">
                                </label>
                            </div>
                            <div class="field is-grouped">
                                <button class="button is-primary" type="submit">Save</button>
                                <label class="button" for="show-readthrough-{{ readthrough.id }}">Cancel</label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div>
                <input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
                <div class="modal toggle-content hidden">
                    <div class="modal-background"></div>
                    <div class="modal-card">
                        <header class="modal-card-head">
                            <p class="modal-card-title">Delete this read-though?</p>
                            <label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
                        </header>
                        <footer class="modal-card-foot">
			    <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
				{% csrf_token %}
				<input type="hidden" name="id" value="{{ readthrough.id }}">
				<button class="button is-danger" type="submit">
				    Delete
				</button>
				<label for="delete-readthrough-{{ readthrough.id }}" class="button">Cancel</button>
			    </form>
                        </footer>
                    </div>
                    <label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
                </div>
            </div>
            {% endfor %}

            {% if request.user.is_authenticated %}
            <div class="box">
                {% include 'snippets/create_status.html' with book=book hide_cover=True %}
            </div>

            <div class="block">
                <form name="tag" action="/tag/" method="post">
                    <label for="tags" class="is-3">Tags</label>
                    {% csrf_token %}
                    <input type="hidden" name="book" value="{{ book.id }}">
                    <input id="tags" class="input" type="text" name="name">
                    <button class="button" type="submit">Add tag</button>
                </form>
            </div>
            {% endif %}

            <div class="block">
                <div class="field is-grouped is-grouped-multiline">
                {% for tag in tags %}
                    {% include 'snippets/tag.html' with book=book tag=tag user_tags=user_tags %}
                {% endfor %}
                </div>
            </div>

        </div>
    </div>
</div>


{% if not reviews %}
<div class="block">
    <p>No reviews yet!</p>
</div>
{% endif %}

<div class="block">
    {% for review in reviews %}
    <div class="block">
        {% include 'snippets/status.html' with status=review hide_book=True depth=1 %}
    </div>
    {% endfor %}

    <div class="block columns">
    {% for rating in ratings %}
    <div class="column">
        <div class="media">
            <div class="media-left">{% include 'snippets/avatar.html' %}</div>
            <div class="media-content">
                <div>
                    {% include 'snippets/username.html' %}
                </div>
                <div class="field is-grouped mb-0">
                    <div>rated it</div>
                    {% include 'snippets/stars.html' with rating=rating.rating %}
                </div>
                <div>
                    <a href="{{ rating.remote_id }}">{{ rating.published_date | naturaltime }}</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    </div>
</div>


{% endblock %}