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

<div class="columns">
    <div class="column is-one-third">
        <h2 class="title is-5">Your books</h2>
        {% if not suggested_books %}
        <p>There are no books here right now! Try searching for a book to get started</p>
        {% else %}
        <div class="tabs is-small">
            <ul>
            {% 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" role="tablist">
                        <ul>
                            {% for book in shelf.books %}
                            <li class="{% if shelf_counter == 1 and forloop.first %}is-active{% endif %}" data-id="tab-book-{{ book.id }}">
                                <label for="book-{{ book.id }}" class="tab-change-nested">
                                    <div role="tab" tabindex="0" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}-panel">
                                        <a>
                                            {% include 'snippets/book_cover.html' with book=book size="medium" %}
                                        </a>
                                    </div>
                                </label>
                            </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>
            <input class="toggle-control" type="radio" name="recent-books" id="book-{{ book.id }}" {% if shelf_counter == 1 and forloop.first %}checked{% endif %}>
            <div class="toggle-content hidden" role="tabpanel" id="book-{{ book.id }}-panel">
                <div class="card">
                    <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="no-book" class="delete" %}
                        </div>
                    </div>
                    <div class="card-content">
                            {% include 'snippets/shelve_button.html' with book=book %}
                        {% include 'snippets/create_status.html' with book=book %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endwith %}
        {% endfor %}
        <div>
            <input class="toggle-control" type="radio" name="recent-books" id="no-book">
        </div>
        {% endif %}

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

    <div class="column is-two-thirds" id="feed">
        <h1 class="title">{{ tab | title }} Timeline</h1>
        <div class="tabs">
            <ul>
                <li class="{% if tab == 'home' %}is-active{% endif %}">
                    <a href="/#feed">Home</a>
                </li>
                <li class="{% if tab == 'local' %}is-active{% endif %}">
                    <a href="/local#feed">Local</a>
                </li>
                <li class="{% if tab == 'federated' %}is-active{% endif %}">
                    <a href="/federated#feed">Federated</a>
                </li>
            </ul>
        </div>

        {# announcements and system messages #}
        {% if not goal and tab == 'home' %}
        {% now 'Y' as year %}
        <section class="block hidden" aria-title="Announcements" data-hide="hide-{{ year }}-reading-goal">
            <article class="card">
                <header class="card-header">
                    <h3 class="card-header-title has-background-primary has-text-white">
                        <span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
                    </h3>
                </header>
                <section class="card-content content">
                    <p>Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.</p>

                    {% include 'snippets/goal_form.html' %}
                </section>
                <footer class="card-footer has-background-white-bis">
                    <div class="card-footer-item is-flex-direction-column">
                        <button class="button is-danger is-light is-block set-display" data-id="hide-{{ year }}-reading-goal" data-value="true">Dismiss message</button>
                        <p class="help">You can set or change your reading goal any time from your <a href="{{ request.user.local_path }}">profile page</a></p>
                    </div>
                </footer>
            </article>
            <hr>
        </section>
        {% endif %}

        {# activity feed #}
        {% if not activities %}
        <p>There aren't any activities right now! Try following a user to get started</p>
        {% endif %}
        {% for activity in activities %}
        <div class="block">
        {% include 'snippets/status.html' with status=activity %}
        </div>
        {% endfor %}

        {% include 'snippets/pagination.html' with page=activities path='/'|add:tab anchor="#feed" %}
    </div>
</div>
{% endblock %}