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

<div class="columns">
    <div class="column">
        <h1 class="title">User profile</h1>
    </div>
    {% if is_self %}
    <div class="column is-narrow">
        <a href="/user-edit/">
            <span class="icon icon-pencil">
                <span class="is-sr-only">Edit profile</span>
            </span>
        </a>
    </div>
    {% endif %}
</div>

{% include 'snippets/user_header.html' with user=user %}

<div class="block">
    <h2 class="title">Shelves</h2>
    <div class="columns">
        {% for shelf in shelves %}
        <div class="column is-narrow">
            <h3>{{ shelf.name }}
                {% if shelf.size > 3 %}<small>(<a href="{{ shelf.local_path }}">See all {{ shelf.size }}</a>)</small>{% endif %}</h3>
            <div class="is-mobile field is-grouped">
            {% for book in shelf.books %}
            <div class="control">
                <a href="{{ book.local_path }}">
                {% include 'snippets/book_cover.html' with book=book size="medium" %}
                </a>
            </div>
            {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <small><a href="{{ user.local_path }}/shelves">See all {{ shelf_count }} shelves</a></small>
</div>

<div>
    <div class="block">
        <h2 class="title">User Activity</h2>
    </div>
    {% for activity in activities %}
    <div class="block">
        {% include 'snippets/status.html' with status=activity %}
    </div>
    {% endfor %}
    {% if not activities %}
    <div class="block">
        <p>No activities yet!</a>
    </div>
    {% endif %}

    <nav class="pagination" role="navigation" aria-label="pagination">
        {% if prev %}
        <p class="pagination-previous">
            <a href="{{ prev }}">
                <span class="icon icon-arrow-left"></span>
                Previous
            </a>
        </p>
        {% endif %}

        {% if next %}
        <p class="pagination-next">
            <a href="{{ next }}">
                Next
                <span class="icon icon-arrow-right"></span>
            </a>
        </p>
        {% endif %}
    </nav>
</div>

{% endblock %}