{% extends 'user/layout.html' %}
{% load i18n %}
{% load utilities %}

{% block header %}
<div class="columns is-mobile">
    <div class="column">
        <h1 class="title">{% blocktrans %}{{ year }} Reading Progress{% endblocktrans %}</h1>
    </div>
    {% if is_self and goal %}
    <div class="column is-narrow">
        {% trans "Edit Goal" as button_text %}
        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="show_edit_goal" focus="edit_form_header" %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block panel %}
<section class="block">
    {% now 'Y' as current_year %}
    {% if user == request.user and year|add:0 == current_year|add:0 %}
    {% comparison_bool goal None as visible %}
    {% include 'user/goal_form.html' with goal=goal year=year visible=visible controls_text="show_edit_goal" class="block" %}
    {% endif %}

    {% if not goal and user != request.user %}
    <p>{% blocktrans with name=user.display_name %}{{ name }} hasn't set a reading goal for {{ year }}.{% endblocktrans %}</p>
    {% endif %}

    {% if goal %}
    {% include 'snippets/goal_progress.html' with goal=goal %}
    {% endif %}
</section>

{% if goal.books %}
<section>
    <h2 class="title is-4">
        {% if goal.user == request.user %}
        {% blocktrans %}Your {{ year }} Books{% endblocktrans %}
        {% else %}
        {% blocktrans with username=goal.user.display_name %}{{ username }}'s {{ year }} Books{% endblocktrans %}
        {% endif %}
    </h2>

    <div class="columns is-mobile is-multiline">
        {% for book in goal.books %}
            <div class="column is-cover">
                <a href="{{ book.book.local_path }}">
                    {% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-xl is-h-l-mobile' %}
                </a>
            </div>
        {% endfor %}
    </div>
</section>
{% endif %}
{% endblock %}