{% load i18n %}
{% comment %}
{% extends 'users/profile.html'|pjax:request %}

{% block page_title %}{{ block.super }}{% endblock %}
{% endcomment %}

{% block profile_content %}
<div class="timeline">
    <dl class="text-center">
        <dt>{% trans "Today" %}</dt>
        <dd class="pos-left">
            <div class="circ"></div>
            <div class="events">
                <h2 class="no-margin-top">
                    {{ item.have_volumes.count }}
                    <small>{% blocktrans with count=item.read_volumes.count %}({{ count }} read){% endblocktrans %}</small>
                </h2>
                <p>{% trans "Volumes owned" %}</p>
            </div>
        </dd>
        <dd class="pos-right clearfix">
            <div class="circ"></div>
            <div class="events">
                <h2 class="no-margin-top">{{ item.wishlisted_volumes.count }}</h2>
                <p>{% trans "Volumes wishlisted" %}</p>
            </div>
        </dd>
    </dl>
    <dl>
        {% regroup timeline by date|date:'F, Y' as timeline_dates %}
        {% for dates in timeline_dates %}
            <dt>{{ dates.grouper }}</dt>
            {% regroup dates.list by date|date:'d' as month_events %}
            {% for day in month_events %}
            <dd class="pos-right clearfix">
                <div class="circ"></div>
                <div class="time">{{ day.grouper }}</div>
                <div class="events">
                    {% for event in day.list %}
                    <div class="events-body">
                        <h4 class="events-heading">
                            {% if event.event_type == 'read' %}
                                <i class="glyphicon glyphicon-eye-open"></i>
                            {% elif event.event_type == 'have' %}
                                <i class="glyphicon glyphicon-ok"></i>
                            {% elif event.event_type == 'wishlist' %}
                                <i class="glyphicon glyphicon-star"></i>
                            {% endif %}
                            {{ event.timeline_message }}
                        </h4>
                    </div>
                    {% endfor %}
                </div>
            </dd>
            {% endfor %}
        {% endfor %}
        <dt>...</dt>
    </dl>
</div>
{% endblock %}
