{% extends 'layout.html' %}
{% load fr_display %}
{% block content %}
<div id="sidebar">
    <div>
        <h2>Currently Reading</h2>
        {# listing books currently on user's shelves #}
        {% if not reading.books.all %}
        <p>Start a book!</p>
        {% for book in to_read.books.all %}
        <div class="book-preview">
            {% include 'snippets/book.html' with book=book size="small" %}
            <form name="shelve" action="/shelve/{{ user.localname }}/reading/{{ book.id }}" method="post">
                {% csrf_token %}
                <input type="hidden" name="book" value="book.id"></input>
                <button type="submit">Start reading</button>
            </form>
        </div>
        {% endfor %}
        {% endif %}

        {% for book in reading.books.all %}
        <div class="book-preview">
            {% include 'snippets/book.html' with book=book size="small" %}
            <form name="shelve" action="/shelve/{{ user.localname }}/read/{{ book.id }}" method="post">
                {% csrf_token %}
                <input type="hidden" name="book" value="book.id"></input>
                <button type="submit">I'm done!</button>
            </form>
        </div>
        {% endfor %}
    </div>

    <div>
        <h2>Recently Added Books</h2>
        {% for book in recent_books %}
        <div class="book-preview">
            {% include 'snippets/book.html' with book=book size="small" %}
            {% if not book in user_books.all %}
            <form name="shelve" action="/shelve/{{ user.localname }}/to-read/{{ book.id }}" method="post">
                {% csrf_token %}
                <input type="hidden" name="book" value="book.id"></input>
                <button type="submit">Want to read</button>
            </form>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<div id="feed">
    <div id="feed-tabs">
        {% for tab in feed_tabs %}
        <div class="{% if tab == active_tab %}active{% endif %}">
            <a href="/{{ tab }}">{{ tab }}</a>
        </div>
        {% endfor %}
    </div>

    {% for activity in activities %}
        {% include 'snippets/status.html' with activity=activity %}
    {% endfor %}
</div>
{% endblock %}