{% extends 'layout.html' %}
{% load i18n %}
{% load bookwyrm_tags %}
{% load humanize %}

{% block title %}{{ book.title }}{% endblock %}

{% block content %}
<div class="block">
    <div class="columns is-mobile">
        <div class="column">
            <h1 class="title">
                {{ book.title }}{% if book.subtitle %}:
                <small>{{ book.subtitle }}</small>{% endif %}
                {% if book.series %}
                <small class="has-text-grey-dark">({{ book.series }}{% if book.series_number %} #{{ book.series_number }}{% endif %})</small><br>
                {% endif %}
            </h1>
            {% if book.authors %}
            <h2 class="subtitle">
                {% trans "by" %} {% include 'snippets/authors.html' with book=book %}
            </h2>
            {% endif %}
        </div>

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

    <div class="columns">
        <div class="column is-one-fifth is-clipped">
            {% 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/shelve_button.html' %}

            {% if request.user.is_authenticated and not book.cover %}
            <div class="block">
                {% trans "Add cover" as button_text %}
                {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="add-cover" controls_uid=book.id focus="modal-title-add-cover" class="is-small" %}
                {% include 'book/cover_modal.html' with book=book controls_text="add-cover" controls_uid=book.id %}
            </div>
            {% endif %}

            <section class="content">
                <dl>
                    {% if book.isbn_13 %}
                    <div class="is-flex is-justify-content-space-between is-align-items-center">
                        <dt>{% trans "ISBN:" %}</dt>
                        <dd>{{ book.isbn_13 }}</dd>
                    </div>
                    {% endif %}

                    {% if book.oclc_number %}
                    <div class="is-flex is-justify-content-space-between is-align-items-center">
                        <dt>{% trans "OCLC Number:" %}</dt>
                        <dd>{{ book.oclc_number }}</dd>
                    </div>
                    {% endif %}

                    {% if book.asin %}
                    <div class="is-flex is-justify-content-space-between is-align-items-center">
                        <dt>{% trans "ASIN:" %}</dt>
                        <dd>{{ book.asin }}</dd>
                    </div>
                    {% endif %}
                </dl>

                <p>
                    {% if book.physical_format and not book.pages %}
                    {{ book.physical_format | title }}
                    {% elif book.physical_format and book.pages %}
                    {% blocktrans with format=book.physical_format|title pages=book.pages %}{{ format }}, {{ pages }} pages{% endblocktrans %}
                    {% elif book.pages %}
                    {% blocktrans with pages=book.pages %}{{ pages }} pages{% endblocktrans %}
                    {% endif %}
                </p>
                <p>
                    {% if book.published_date and book.publishers %}
                    {% blocktrans with date=book.published_date|date:'M jS Y' publisher=book.publishers|join:', ' %}Published {{ date }} by {{ publisher }}.{% endblocktrans %}
                    {% elif book.published_date %}
                    {% blocktrans with date=book.published_date|date:'M jS Y' %}Published {{ date }}{% endblocktrans %}
                    {% elif book.publishers %}
                    {% blocktrans with publisher=book.publishers|join:', ' %}Published by {{ publisher }}.{% endblocktrans %}
                    {% endif %}
                </p>

                {% if book.openlibrary_key %}
                <p><a href="https://openlibrary.org/books/{{ book.openlibrary_key }}" target="_blank" rel="noopener">{% trans "View on OpenLibrary" %}</a></p>
                {% endif %}
            </section>
        </div>

        <div class="column is-three-fifths">
            <div class="block">
                <h3 class="field is-grouped">
                    {% include 'snippets/stars.html' with rating=rating %}
                    {% blocktrans count counter=review_count %}({{ review_count }} review){% plural %}({{ review_count }} reviews){% endblocktrans %}
                </h3>

                {% include 'snippets/trimmed_text.html' with full=book|book_description %}

                {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
                {% trans 'Add Description' as button_text %}
                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="add-description" controls_uid=book.id focus="id_description" hide_active=True id="hide-description" %}

                <div class="box hidden" id="add-description-{{ book.id }}">
                    <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
                        {% csrf_token %}
                        <p class="fields is-grouped">
                            <label class="label"for="id_description">{% trans "Description:" %}</label>
                            <textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea>
                        </p>
                        <div class="field">
                            <button class="button is-primary" type="submit">{% trans "Save" %}</button>
                            {% trans "Cancel" as button_text %}
                            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add-description" controls_uid=book.id hide_inactive=True %}
                        </div>
                    </form>
                </div>
                {% endif %}


                {% if book.parent_work.editions.count > 1 %}
                <p>{% blocktrans with path=book.parent_work.local_path count=book.parent_work.editions.count %}<a href="{{ path }}/editions">{{ count }} editions</a>{% endblocktrans %}</p>
                {% endif %}
            </div>

            {# user's relationship to the book #}
            <div class="block">
                {% for shelf in user_shelves %}
                <p>
                    {% blocktrans with path=shelf.shelf.local_path shelf_name=shelf.shelf.name %}This edition is on your <a href="{{ path }}">{{ shelf_name }}</a> shelf.{% endblocktrans %}
                    {% include 'snippets/shelf_selector.html' with current=shelf.shelf %}
                </p>
                {% endfor %}
                {% for shelf in other_edition_shelves %}
                <p>
                {% blocktrans with book_path=shelf.book.local_path shelf_path=shelf.shelf.local_path shelf_name=shelf.shelf.name %}A <a href="{{ book_path }}">different edition</a> of this book is on your <a href="{{ shelf_path }}">{{ shelf_name }}</a> shelf.{% endblocktrans %}
                    {% include 'snippets/switch_edition_button.html' with edition=book %}
                </p>
                {% endfor %}
            </div>

            {% if request.user.is_authenticated %}
            <section class="block">
                <header class="columns">
                    <h2 class="column title is-5 mb-1">{% trans "Your reading activity" %}</h2>
                    <div class="column is-narrow">
                        {% trans "Add read dates" as button_text %}
                        {% include 'snippets/toggle/open_button.html' with text=button_text icon="plus" class="is-small" controls_text="add-readthrough" %}
                    </div>
                </header>
                {% if not readthroughs.exists %}
                <p>{% trans "You don't have any reading activity for this book." %}</p>
                {% endif %}
                <section class="hidden box" id="add-readthrough">
                    <form name="add-readthrough" action="/create-readthrough" method="post">
                        {% include 'snippets/readthrough_form.html' with readthrough=None %}
                        <div class="field is-grouped">
                            <div class="control">
                                <button class="button is-primary" type="submit">{% trans "Create" %}</button>
                            </div>
                            <div class="control">
                                {% trans "Cancel" as button_text %}
                                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add-readthrough" %}
                            </div>
                        </div>
                    </form>
                </section>
                {% for readthrough in readthroughs %}
                {% include 'snippets/readthrough.html' with readthrough=readthrough %}
                {% endfor %}
            </section>
            {% endif %}

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

            <section class="block">
                <form name="tag" action="/tag/" method="post">
                    <label for="tags" class="is-3">{% trans "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">{% trans "Add tag" %}</button>
                </form>
            </section>
            {% 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 class="column is-one-fifth">
            {% if book.subjects %}
            <section class="content block">
                <h2 class="title is-5">{% trans "Subjects" %}</h2>
                <ul>
                {% for subject in book.subjects %}
                    <li>{{ subject }}</li>
                {% endfor %}
                </ul>
            </section>
            {% endif %}

            {% if book.subject_places %}
            <section class="content block">
                <h2 class="title is-5">{% trans "Places" %}</h2>
                <ul>
                {% for place in book.subject_places %}
                    <li>{{ place }}</li>
                {% endfor %}
                </ul>
            </section>
            {% endif %}

            {% if lists.exists or request.user.list_set.exists %}
            <section class="content block">
                <h2 class="title is-5">{% trans "Lists" %}</h2>
                <ul>
                {% for list in lists %}
                <li><a href="{{ list.local_path }}">{{ list.name }}</a></li>
                {% endfor %}
                </ul>

                {% if request.user.list_set.exists %}
                <form name="list-add" method="post" action="{% url 'list-add-book' %}">
                    {% csrf_token %}
                    <input type="hidden" name="book" value="{{ book.id }}">
                    <label class="label" for="id_list">{% trans "Add to list" %}</label>
                    <div class="field has-addons">
                        <div class="select control">
                            <select name="list" id="id_list">
                                {% for list in user.list_set.all %}
                                <option value="{{ list.id }}">{{ list.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="control">
                            <button type="submit" class="button is-link">{% trans "Add" %}</button>
                        </div>
                    </div>
                </form>
                {% endif %}
            </section>
            {% endif %}
        </div>
    </div>
</div>

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

    <div class="block is-flex is-flex-wrap-wrap">
        {% for rating in ratings %}
        <div class="block mr-5">
            <div class="media">
                <div class="media-left">{% include 'snippets/avatar.html' with user=rating.user %}</div>
                <div class="media-content">
                    <div>
                        <a href="{{ rating.user.local_path }}">{{ rating.user.display_name }}</a>
                    </div>
                    <div class="is-flex">
                        <p class="mr-1">{% trans "rated it" %}</p>
                        {% 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 class="block">
        {% include 'snippets/pagination.html' with page=reviews path=book.local_path anchor="#reviews" %}
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/js/tabs.js"></script>
{% endblock %}