{% extends '_layout.html'|pjax:request %}
{% load i18n %}

{% block page_title %}{{ block.super }} | {% trans "Profile" %}{% endblock %}

{% block main_content %}
<div class="container">
    <div class="row">
        <div class="col-sm-3 profile-sidebar">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <h1 class="panel-title">{{ item.username }}</h1>
                </div>
                <div class="avatar">
                    <div class="badges">
                        {% if item.is_staff %}
                        <span class="label label-warning">
                            <i class="glyphicon glyphicon-star"></i>
                            STAFF
                        </span>
                        {% endif %}
                    </div>
                    <img src="{{ item.avatar }}" class="max-width-100" />
                </div>
                <div class="list-group">
                    <a data-pjax-nav href="{% url 'profile' %}" data-pjax class="list-group-item active">
                        {% trans "Summary" %}</a>
                    {% if user.have_volumes.count > 0 %}
                    <a data-pjax-nav href="{% url 'profile' 'collection' %}" data-pjax="profile" class="list-group-item">
                        {% trans "Collection" %}</a>
                    {% endif %}
                    {% if user.wishlisted_volumes.count > 0 %}
                    <a data-pjax-nav href="{% url 'profile' 'wishlist' %}" data-pjax="profile" class="list-group-item">
                        {% trans "Wishlist" %}</a>
                    {% endif %}
                    {% comment %}
                    <a data-pjax-nav href="{% url 'profile' 'achievements' %}" data-pjax="profile" class="list-group-item">
                        {% trans "Achievements" %}</a>
                    {% endcomment %}
                </div>
            </div>
            <div>
                <button class="btn btn-info btn-block">{% trans "Edit my profile" %}</button>
            </div>
        </div>
        <div class="col-sm-9" data-pjax-container="profile">
            {% block profile_content %}
                {% include "users/profile/summary.html" %}
            {% endblock %}
        </div>
    </div>
</div>
{% endblock %}