{% extends 'layout.html' %}
{% load i18n %}
{% load book_display_tags %}
{% load humanize %}
{% load utilities %}
{% load static %}

{% block title %}{{ book|book_title }}{% endblock %}

{% block opengraph_images %}
    {% include 'snippets/opengraph_images.html' with image=book.preview_image %}
{% endblock %}

{% block content %}
{% if update_error %}
<div class="notification is-danger is-light">
    <span class="icon icon-x" aria-hidden="true"></span>
    <span>
        {% trans "Unable to connect to remote source." %}
    </span>
</div>
{% endif %}

{% with user_authenticated=request.user.is_authenticated can_edit_book=perms.bookwyrm.edit_book %}
<div class="block" itemscope itemtype="https://schema.org/Book">
    <div class="columns is-mobile">
        <div class="column">
            <h1 class="title" itemprop="name">
                {{ book.title }}
            </h1>

            {% if book.subtitle or book.series %}
                <p class="subtitle title is-5">
                    {% if book.subtitle %}
                        <meta
                            itemprop="alternativeHeadline"
                            content="{{ book.subtitle | escape }}"
                        >

                        <span class="has-text-weight-bold">
                            {{ book.subtitle }}
                        </span>
                    {% endif %}

                    {% if book.series %}
                        <meta itemprop="isPartOf" content="{{ book.series | escape }}">
                        <meta itemprop="volumeNumber" content="{{ book.series_number }}">

                        ({{ book.series }}{% if book.series_number %} #{{ book.series_number }}{% endif %})
                    {% endif %}
                </p>
            {% endif %}

            {% if book.authors.exists %}
                <div class="subtitle">
                    {% trans "by" %} {% include 'snippets/authors.html' with book=book %}
                </div>
            {% endif %}
        </div>

        {% if user_authenticated and can_edit_book %}
        <div class="column is-narrow">
            <a href="{% url 'edit-book' book.id %}">
                <span class="icon icon-pencil" title="{% trans "Edit Book" %}" aria-hidden=True></span>
                <span class="is-hidden-mobile">{% trans "Edit Book" %}</span>
            </a>
        </div>
        {% endif %}
    </div>

    <div class="columns">
        <div class="column is-one-fifth">
            {% if not book.cover %}
                {% if user_authenticated %}
                    <button
                        type="button"
                        class="cover-container no-cover is-h-m-mobile"
                        data-modal-open="add_cover_{{ book.id }}"
                    >
                        <img
                            class="book-cover"
                            src="{% static "images/no_cover.jpg" %}"
                            alt=""
                            aria-hidden="true"
                        >
                        <span class="cover-caption">
                            <span>{{ book.alt_text }}</span>
                            <span>{% trans "Click to add cover" %}</span>
                        </span>
                        <span class="button-invisible-overlay has-text-centered">
                            {% trans "Click to add cover" %}
                        </span>
                    </button>
                    {% join "add_cover" book.id as modal_id %}
                    {% include 'book/cover_add_modal.html' with id=modal_id %}
                    {% if request.GET.cover_error %}
                    <p class="help is-danger">{% trans "Failed to load cover" %}</p>
                    {% endif %}
                {% else %}
                    {% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
                {% endif %}
            {% endif %}

            {% if book.cover %}
                <button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile is-relative">
                {% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
                    <span class="button-invisible-overlay has-text-centered">
                        {% trans "Click to enlarge" %}
                    </span>
                </button>
                {% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}
            {% endif %}

            {% include 'snippets/rate_action.html' with user=request.user book=book %}

            <div class="mb-3">
                {% include 'snippets/shelve_button/shelve_button.html' %}
            </div>

            <section class="is-clipped">
                {% with book=book %}
                    <div class="content">
                        {% include 'book/publisher_info.html' %}
                    </div>

                    <div class="my-3">
                        {% include 'book/book_identifiers.html' %}
                    </div>
                {% endwith %}

                {% trans "Load data" as button_text %}
                {% if book.openlibrary_key %}
                <p>
                    <a href="{{ book.openlibrary_link }}" target="_blank" rel="noopener noreferrer">
                        {% trans "View on OpenLibrary" %}
                    </a>
                    {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
                    <button class="button is-small" type="button" data-modal-open="openlibrary_sync">
                        <span class="icon icon-download" title="{{ button_text }}"></span>
                        <span class="is-sr-only-mobile">{{ button_text }}</span>
                    </button>
                    {% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %}
                    {% endif %}
                </p>
                {% endif %}
                {% if book.inventaire_id %}
                <p>
                    <a href="{{ book.inventaire_link }}" target="_blank" rel="noopener noreferrer">
                        {% trans "View on Inventaire" %}
                    </a>

                    {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
                    <button class="button is-small" type="button" data-modal-open="inventaire_sync">
                        <span class="icon icon-download" title="{{ button_text }}"></span>
                        <span class="is-sr-only-mobile">{{ button_text }}</span>
                    </button>
                    {% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %}
                    {% endif %}
                </p>
                {% endif %}
            </section>
        </div>

        <div class="column is-three-fifths">
            <div class="block">
                <div
                    class="field is-grouped"
                    itemprop="aggregateRating"
                    itemscope
                    itemtype="https://schema.org/AggregateRating"
                >
                    <meta itemprop="ratingValue" content="{{ rating|floatformat }}">
                    {# @todo Is it possible to not hard-code the value? #}
                    <meta itemprop="bestRating" content="5">
                    <meta itemprop="reviewCount" content="{{ review_count }}">

                    {% include 'snippets/stars.html' with rating=rating %}

                    {% blocktrans count counter=review_count trimmed %}
                        ({{ review_count }} review)
                    {% plural %}
                        ({{ review_count }} reviews)
                    {% endblocktrans %}
                </div>

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

                {% if user_authenticated and can_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 is-hidden" id="add_description_{{ book.id }}">
                    <form name="add-description" method="POST" action="{% url "add-description" book.id %}">
                        {% csrf_token %}
                        <p class="fields is-grouped">
                            <label class="label" for="id_description_{{ book.id }}">{% trans "Description:" %}</label>
                            <textarea name="description" cols="None" rows="None" class="textarea" id="id_description_{{ book.id }}"></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 %}


                {% with work=book.parent_work %}
                <p>
                    <a href="{{ work.local_path }}/editions">
                        {% blocktrans trimmed count counter=work.editions.count with count=work.editions.count|intcomma %}
                            {{ count }} edition
                            {% plural %}
                            {{ count }} editions
                        {% endblocktrans %}
                    </a>
                </p>
                {% endwith %}
            </div>

            {# user's relationship to the book #}
            <div class="block">
                {% if user_shelfbooks.count > 0 %}
                <h2 class="title is-5">
                    {% trans "You have shelved this edition in:" %}
                </h2>
                <ul>
                {% for shelf in user_shelfbooks %}
                    <li class="box">
                        <a href="{{ shelf.shelf.local_path }}">{{ shelf.shelf.name }}</a>
                        <div class="mb-3">
                            {% include 'snippets/shelf_selector.html' with shelf=shelf.shelf class="is-small" readthrough=readthrough %}
                        </div>
                    </li>
                {% endfor %}
                </ul>
                {% endif %}
                {% 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 user_authenticated %}
            <hr aria-hidden="true">
            <section class="block">
                <header class="columns">
                    <div class="column">
                    <h2 class="title is-5">{% trans "Your reading activity" %}</h2>
                    </div>
                    <div class="column is-narrow">
                        <button class="button is-small" data-modal-open="add-readthrough">
                            <span class="icon icon-plus m-mobile-0" aria-hidden="true"></span>
                            <span class="is-sr-only-mobile">
                                {% trans "Add read dates" %}
                            </span>
                        </button>
                    </div>
                </header>
                {% include "readthrough/readthrough_modal.html" with id="add-readthrough" %}

                {% if not readthroughs.exists %}
                <p>{% trans "You don't have any reading activity for this book." %}</p>
                {% endif %}
                {% for readthrough in readthroughs %}
                {% include 'readthrough/readthrough_list.html' with readthrough=readthrough %}
                {% endfor %}
            </section>
            <hr aria-hidden="true">

            <section class="box">
                {% with 0|uuid as controls_uid %}
                {% include 'snippets/create_status.html' with book=book hide_cover=True %}
                {% endwith %}
            </section>
            {% endif %}
            <div class="block" id="reviews">
                {% if request.user.is_authenticated %}
                {% if user_statuses.review_count or user_statuses.comment_count or user_statuses.quotation_count %}
                <nav class="tabs">
                    <ul>
                        {% url 'book' book.id book.name|slugify as tab_url %}
                        <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                            <a href="{{ tab_url }}#reviews">{% trans "Reviews" %} ({{ review_count }})</a>
                        </li>
                        {% if user_statuses.review_count %}
                        {% url 'book-user-statuses' book.id 'review' as tab_url %}
                        <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                            <a href="{{ tab_url }}#reviews">{% trans "Your reviews" %} ({{ user_statuses.review_count }})</a>
                        </li>
                        {% endif %}
                        {% if user_statuses.comment_count %}
                        {% url 'book-user-statuses' book.id 'comment' as tab_url %}
                        <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                            <a href="{{ tab_url }}#reviews">{% trans "Your comments" %} ({{ user_statuses.comment_count }})</a>
                        </li>
                        {% endif %}
                        {% if user_statuses.quotation_count %}
                        {% url 'book-user-statuses' book.id 'quote' as tab_url %}
                        <li {% if tab_url == request.path %}class="is-active"{% endif %}>
                            <a href="{{ tab_url }}#reviews">{% trans "Your quotes" %} ({{ user_statuses.quotation_count }})</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                {% endif %}

                {% for status in statuses %}
                    <div
                        class="block"
                        {% if status.status_type == 'Review' or status.status_type == 'Rating' %}
                        itemprop="review"
                        itemscope
                        itemtype="https://schema.org/Review"
                        {% endif %}
                    >
                        {% include 'snippets/status/status.html' with status=status hide_book=True depth=1 %}
                    </div>
                {% endfor %}

                {% if ratings %}
                <div class="block is-flex is-flex-wrap-wrap">
                    {% for rating in ratings %}
                        {% include 'book/rating.html' with user=rating.user rating=rating %}
                    {% endfor %}
                </div>
                {% endif %}
                <div class="block">
                    {% include 'snippets/pagination.html' with page=statuses path=request.path anchor="#reviews" %}
                </div>
            </div>
        </div>
        <div class="column is-one-fifth is-clipped">
            {% if book.subjects %}
                <section class="content block">
                    <h2 class="title is-5">{% trans "Subjects" %}</h2>

                    <ul>
                        {% for subject in book.subjects %}
                            <li itemprop="about">{{ 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 is-clipped">
                <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 list_options.exists %}
                <form name="list-add" method="post" action="{% url 'list-add-book' %}">
                    {% csrf_token %}
                    <input type="hidden" name="book" value="{{ book.id }}">
                    <input type="hidden" name="user" value="{{ request.user.id }}">
                    <label class="label" for="id_list">{% trans "Add to list" %}</label>
                    <div class="field has-addons">
                        <div class="select control is-clipped">
                            <select name="book_list" id="id_list">
                                {% for list in list_options %}
                                <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 %}

            <section class="content block">
                {% include "book/file_links/links.html" %}
            </section>
        </div>
    </div>

</div>
{% endwith %}
{% endblock %}

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