{% extends 'layout.html' %}
{% load i18n %}
{% load bookwyrm_tags %}
{% block content %}

<div class="columns">
    {% if user.is_authenticated %}
    <div class="column is-one-third">
        <h2 class="title is-5">{% trans "Your books" %}</h2>
        {% if not suggested_books %}
        <p>{% trans "There are no books here right now! Try searching for a book to get started" %}</p>
        {% else %}
        <div class="tab-group">
            <div class="tabs is-small">
                <ul role="tablist">
                {% for shelf in suggested_books %}
                {% if shelf.books %}
                {% with shelf_counter=forloop.counter %}
                    <li>
                        <p>
                            {{ shelf.name }}
                        </p>
                        <div class="tabs is-small is-toggle">
                            <ul>
                                {% for book in shelf.books %}
                                <li{% if shelf_counter == 1 and forloop.first %} class="is-active"{% endif %}>
                                    <a href="#book-{{ book.id }}" id="tab-book-{{ book.id }}" role="tab" aria-label="{{ book.title }}" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}">
                                        {% include 'snippets/book_cover.html' with book=book size="medium" %}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </li>
                {% endwith %}
                {% endif %}
                {% endfor %}
                </ul>
            </div>
            {% for shelf in suggested_books %}
            {% with shelf_counter=forloop.counter %}
            {% for book in shelf.books %}
            <div class="suggested-tabs card" role="tabpanel" id="book-{{ book.id }}"{% if shelf_counter != 1 or not forloop.first %} hidden{% endif %} aria-labelledby="tab-book-{{ book.id }}">
                <div class="card-header">
                    <p class="card-header-title">
                        <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
                    </p>
                    <div class="card-header-icon is-hidden-tablet">
                        {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="book" controls_uid=book.id class="delete" nonbutton=True pressed=True %}
                    </div>
                </div>
                <div class="card-content">
                {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
                {% active_shelf book as active_shelf %}
                {% if active_shelf.shelf.identifier == 'reading' and book.latest_readthrough %}
                {% include 'snippets/progress_update.html' with readthrough=book.latest_readthrough %}
                {% endif %}
                {% include 'snippets/create_status.html' with book=book %}
                </div>
            </div>
            {% endfor %}
            {% endwith %}
            {% endfor %}
        </div>
        {% endif %}

        {% if goal %}
        <section class="section">
            <div class="block">
                <h3 class="title is-4">{% blocktrans with yar=goal.year %}{{ year }} Reading Goal{% endblocktrans %}</h3>
                {% include 'snippets/goal_progress.html' with goal=goal %}
            </div>
        </section>
        {% endif %}
    </div>
    {% endif %}

    <div class="column is-two-thirds" id="feed">
        {% block panel %}{% endblock %}

        {% if activities %}
        {% include 'snippets/pagination.html' with page=activities path=path anchor="#feed" %}
        {% endif %}
    </div>
</div>
{% endblock %}