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


{% block title %}{% blocktrans %}{{ year }} in the books{% endblocktrans %}{% endblock %}

{% block head_links %}
    <link rel="stylesheet" href="{% static "css/vendor/dm_serif_display.css" %}">
{% endblock %}

{% block content %}
{% with display_name=summary_user.display_name %}
{% if user == summary_user %}
    <div class="columns">
    {% with year=paginated_years|first %}
    {% if year %}
        <div class="column">
            <a href="{% url 'annual-summary' summary_user.localname year %}">
                <span class="icon icon-arrow-left" aria-hidden="true"></span>
                {{ year }}
            </a>
        </div>
    {% endif %}
    {% endwith %}

    {% with year=paginated_years|last %}
    {% if year %}
        <div class="column has-text-right">
            <a href="{% url 'annual-summary' summary_user.localname year %}">
                {{ year }}
                <span class="icon icon-arrow-right" aria-hidden="true"></span>
            </a>
        </div>
    {% endif %}
    {% endwith %}
    </div>
{% endif %}

    <h1 class="title is-1 is-serif has-text-centered">
        📚✨
        {% blocktrans %}{{ year }} <em>in the books</em>{% endblocktrans %}
        ✨📚
    </h1>
    <p class="subtitle is-3 is-serif has-text-centered mb-5">
        {% blocktrans %}<em>{{ display_name }}’s</em> year of reading{% endblocktrans %}
    </p>

    <details>
        <summary class="has-text-centered">
            <span role="heading" aria-level="2" class="title is-6 has-text-success-dark">
                {% trans "Share this page" %}
            </span>
        </summary>
        <div class="columns mt-3">
            <div class="column is-three-fifths is-offset-one-fifth">

            {% if year_key %}
                <div class="horizontal-copy mb-5">
                    <textarea rows="1" readonly class="textarea is-small" aria-labelledby="embed-label" data-copytext data-copytext-label="{% trans 'Copy address' %}" data-copytext-success="{% trans 'Copied!' %}">{{ request.scheme|add:"://"|add:request.get_host|add:request.path }}?key={{ year_key }}</textarea>
                </div>
            {% endif %}

            {% if user == summary_user %}
            {% if year_key %}
                <div class="columns mb-2">
                    <div class="column pb-0">
                        <p>{% trans "Sharing status: <strong>public with key</strong>" %}</p>
                        <p>{% trans "The page can be seen by anyone with the complete address." %}</p>
                    </div>
                    <form class="column pb-0 is-narrow" method="post" action="{% url "summary-revoke-key" %}" id="revoke-key">
                        {% csrf_token %}
                        <input type="hidden" name="year" value="{{ year }}" />
                        <button class="button is-danger is-outlined" type="submit">{% trans "Make page private" %}</button>
                    </form>
                </div>
            {% else %}
                <div class="columns">
                    <div class="column pb-0">
                        <p>{% trans "Sharing status: <strong>private</strong>" %}</p>
                        <p>{% trans "The page is private, only you can see it." %}</p>
                    </div>
                    <form class="column pb-0 is-narrow" method="post" action="{% url "summary-add-key" %}" id="add-key">
                        {% csrf_token %}
                        <input type="hidden" name="year" value="{{ year }}" />
                        <button class="button is-primary is-outlined" type="submit">{% trans "Make page public" %}</button>
                    </form>
                </div>
            {% endif %}
                <p class="help">{% trans "When you make your page private, the old key won’t give access to the page anymore. A new key will be created if the page is once again made public." %}</p>
            {% endif %}
            </div>
        </div>
    </details>

    <div class="columns mt-1">
        <div class="column is-one-fifth is-offset-two-fifths">
            <hr />
        </div>
    </div>

{% if not books %}
    <p class="has-text-centered is-size-5">{% blocktrans %}Sadly {{ display_name }} didn’t finish any book in {{ year }}{% endblocktrans %}</p>
{% else %}

    <div class="columns is-mobile">
        <div class="column is-8 is-offset-2 has-text-centered">
            <h2 class="title is-3 is-serif">
                {% blocktrans %}In {{ year }}, {{ display_name }} read {{ books_total }} books<br />for a total of {{ pages_total }} pages!{% endblocktrans %}
            </h2>
            <p class="subtitle is-5">{% trans "That’s great!" %}</p>

            <p class="title is-4 is-serif">
                {% blocktrans with pages=pages_average|intcomma %}That makes an average of {{ pages }} pages per book.{% endblocktrans %}
            </p>

            {% if no_page_number %}
                <p class="subtitle is-6">
                    {% blocktrans trimmed count counter=no_page_number %}
                    ({{ no_page_number }} book doesn’t have pages)
                    {% plural %}
                    ({{ no_page_number }} books don’t have pages)
                    {% endblocktrans %}
                </p>
            {% endif %}
        </div>
    </div>

    {% if book_pages_lowest and book_pages_highest %}
    <div class="columns is-mobile is-align-items-center mt-5">
        <div class="column is-2 is-offset-1">
            <a href="{{ book_pages_lowest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_lowest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
        </div>
        <div class="column is-3">
            {% trans "Their shortest read this year…" %}
            <p class="title is-4 is-serif is-italic">
                <a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
                    {{ book_pages_lowest.title }}
                </a>
            </p>
            {% if book_pages_lowest.authors.exists %}
            <p class="subtitle is-5 mb-2">{% trans "by" %}
                {% include 'snippets/authors.html' with book=book_pages_lowest link_class="has-text-success-dark" %}
            </p>
            {% endif %}
            <p class="subtitle is-6">
                {% with pages=book_pages_lowest.pages %}
                {% blocktrans %}<strong>{{ pages }}</strong> pages{% endblocktrans%}
                {% endwith %}
            </p>
        </div>
        <div class="column is-2">
            <a href="{{ book_pages_highest.local_path }}">{% include 'snippets/book_cover.html' with book=book_pages_highest cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
        </div>
        <div class="column is-3">
            {% trans "…and the longest" %}
            <p class="title is-4 is-serif is-italic">
                <a href="{{ book_pages_lowest.local_path }}" class="has-text-success-dark">
                    {{ book_pages_highest.title }}
                </a>
            </p>
            {% if book_pages_highest.authors.exists %}
            <p class="subtitle is-5 mb-2">{% trans "by" %}
                {% include 'snippets/authors.html' with book=book_pages_highest link_class="has-text-success-dark" %}
            </p>
            {% endif %}
            <p class="subtitle is-6">
                {% with pages=book_pages_highest.pages %}
                {% blocktrans %}<strong>{{ pages }}</strong> pages{% endblocktrans%}
                {% endwith %}
            </p>
        </div>
    </div>
    {% endif %}

    <div class="columns">
        <div class="column is-one-fifth is-offset-two-fifths">
            <hr />
        </div>
    </div>

    {% if ratings_total > 0 %}
    <div class="columns">
        <div class="column has-text-centered">
            <h2 class="title is-3 is-serif">
            {% blocktrans %}{{ display_name }} left {{ ratings_total }} ratings, <br />their average rating is {{ rating_average }}{% endblocktrans %}
            </h2>
        </div>
    </div>
    <div class="columns is-align-items-center">
        <div class="column is-3 is-offset-3">
            <a href="{{ book_rating_highest.book.local_path }}">{% include 'snippets/book_cover.html' with book=book_rating_highest.book cover_class='is-w-auto-tablet is-h-l-mobile' %}</a>
        </div>
        {% if book_rating_highest %}
        <div class="column is-4">
            {% trans "Their best rated review" %}
            <p class="title is-4 is-serif is-italic">
                <a href="{{ book_rating_highest.book.local_path }}" class="has-text-success-dark">
                    {{ book_rating_highest.book.title }}
                </a>
            </p>
            {% if book_rating_highest.book.authors.exists %}
            <p class="subtitle is-5 mb-2">{% trans "by" %}
                {% include 'snippets/authors.html' with book=book_rating_highest.book link_class="has-text-success-dark" %}
            </p>
            {% endif %}
            <p class="subtitle is-6">
                {% with rating=book_rating_highest.rating|floatformat %}
                {% blocktrans %}Their rating: <strong>{{ rating }}</strong>{% endblocktrans%}
                {% endwith %}
            </p>
        </div>
        {% endif %}
    </div>

    <div class="columns">
        <div class="column is-one-fifth is-offset-two-fifths">
            <hr />
        </div>
    </div>
    {% endif %}

    <div class="columns">
        <div class="column has-text-centered">
            <h2 class="title is-3 is-serif">
            {% blocktrans %}All the books {{ display_name }} read in 2021{% endblocktrans %}
            </h2>
        </div>
    </div>

    <div class="columns">
        <div class="column is-10 is-offset-1">
            <div class="books-grid">
                {% for book in books %}
                {% if book.id in best_ratings_books_ids %}
                <a href="{{ book.local_path }}" class="has-text-centered is-big has-text-success-dark">
                    {% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='xxlarge' %}
                    <span class="book-title is-serif is-size-5">
                        {{ book.title }}
                    </span>
                </a>
                {% else %}
                <a href="{{ book.local_path }}" class="has-text-centered has-text-success-dark">
                    {% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='large' %}
                    <span class="book-title is-serif is-size-6">
                        {{ book.title }}
                    </span>
                </a>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}
{% endwith %}
{% endblock %}