{% 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">
            <img class="book-cover small" src="{% if book.cover %}/images/{{ book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
            <p class="title"><a href="{{ book.openlibrary_key }}">{{ book.data.title }}</a></p>
            <p>by <a href="" class="author">{{ book.authors.first.data.name }}</a></p>
            <form name="shelve" action="/shelve/{{ user.localname }}_currently-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">
            <img class="book-cover small" src="{% if book.cover %}/images/{{ book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
            <p class="title"><a href="{{ book.openlibrary_key }}">{{ book.data.title }}</a></p>
            <p>by <a href="" class="author">{{ book.authors.first.data.name }}</a></p>
            <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">
            <img class="book-cover small" src="{% if book.cover %}/images/{{ book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
            <p class="title">
                <a href="{{ book.openlibrary_key }}">{{ book.data.title }}</a>
                by
                {# TODO: there should be a helper function for listing authors #}
                <a href="" class="author">{{ book.authors.first.data.name }}</a>
            </p>
            {% 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">

    {% for activity in activities %}
    <div class="update">
        <h2>
            <img class="user-pic" src="{% if activity.user.avatar %}/images/{{ activity.user.avatar }}{% else %}/static/images/default_avi.jpg{% endif %}">
        {# TODO: a helper function for displaying a username #}
        <a href="/user/{% if activity.user.localname %}{{ activity.user.localname }}{% else %}{{ activity.user.username }}{% endif %}" class="user">
                {% if activity.user.localname %}{{ activity.user.localname }}{% else %}{{ activity.user.username }}{% endif %}</a>
        {% if activity.fedireads_type == 'Shelve' %}
            {# display a reading/shelving activity #}
            {% if activity.shelf.shelf_type == 'to-read' %}
                wants to read
            {% elif activity.shelf.shelf_type == 'read' %}
                finished reading
            {% elif activity.shelf.shelf_type == 'reading' %}
                started reading
            {% else %}
                shelved in "{{ activity.shelf.name }}"
            {% endif %}
        </h2>
            {# TODO: wouldn't it rule if this was a reusable piece of markup? #}
            <div class="book-preview">
                <img class="book-cover" src="{% if activity.book.cover %}/images/{{ activity.book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
                <p class="title">
                    <a href="{{ activity.book.openlibrary_key }}">{{ activity.book.data.title }}</a>
                    by
                    <a href="" class="author">{{ activity.book.authors.first.data.name }}</a>
                    <blockquote>{{ activity.book.data.description }}</blockquote>
                </p>
            </div>
            <div class="interaction"><button>⭐️ Like</button></div>
        {% elif activity.fedireads_type == 'Review' %}
            {# display a review #}
            reviewed {{ activity.book.data.title }}
        </h2>
            <div class="book-preview review">
                <img class="book-cover" src="{% if activity.book.cover %}/images/{{ activity.book.cover }}{% else %}/static/images/no_cover.jpg{% endif %}">
                <p class="title">
                    <a href="{{ activity.book.openlibrary_key }}">{{ activity.book.data.title }}</a>
                    by
                    <a href="" class="author">{{ activity.book.authors.first.data.name }}</a>
                    <blockquote>{{ activity.book.data.description }}</blockquote>
                </p>

                <h3>{{ activity.name }}</h3>
                <p>{{ activity.rating | stars }} stars</p>
                <p>{{ activity.review_content }}</p>
            </div>
            <div class="interaction"><button>⭐️ Like</button></div>
        {% elif activity.activity_type == 'Follow' %}
            started following someone
        </h2>
        {% else %}
        {# generic handling for a misc activity, which perhaps should not be displayed at all #}
            did {{ activity.activity_type }}
        </h2>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endblock %}