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

{% block main_content %}
<div class="container">
    <div class="row">
        <div class="col-sm-8">
           <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title panel-title-alt text-center">{% trans "Upcoming volumes" %}</h1>
                </div>
            </div>
            <div class="row">
                {% for volume in FUTURE_RELEASES %}
                <div class="col-sm-6 latest-manga">
                    <div class="well text-right item" style="background: white url({% thumbnail volume.cover 80x120 crop %}) top left no-repeat;">
                        <div class="content">
                            <a href="{{ volume.series.get_absolute_url }}" data-pjax>
                                <h4 class="media-heading">{{ volume }}</h4>
                            </a>
                            <p>
                                <a href="{{ volume.publisher.get_absolute_url }}" data-pjax>{{ volume.publisher }}</a><br />
                                {{ volume.release_date|date:'F Y' }}
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:2 %}
                </div><div class="row">
                {% endif %}
                {% endfor %}
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h1 class="panel-title panel-title-alt text-center">{% trans "Latest releases" %}</h1>
                </div>
            </div>
            <div class="row">
                {% for volume in LATEST_MANGA_ADDED %}
                <div class="col-sm-6 latest-manga">
                    <div class="well text-right item" style="background: white url({% thumbnail volume.cover 80x120 crop %}) top left no-repeat;">
                        <div class="content">
                            <a href="{{ volume.series.get_absolute_url }}" data-pjax>
                                <h4 class="media-heading">{{ volume }}</h4>
                            </a>
                            <p>
                                <a href="{{ volume.publisher.get_absolute_url }}" data-pjax>{{ volume.publisher }}</a><br />
                                {{ volume.release_date|date:'F Y' }}
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:2 %}
                </div><div class="row">
                {% endif %}
                {% endfor %}
            </div>

        </div>
        <div class="col-sm-2"></div>
        <div class="col-sm-4">
            <!-- WIDGETS -->
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Biggest collections" %}</h3>
                </div>
                <ul class="list-group">
                    {% for user in TOP_5_COLLECTORS %}
                    <li class="list-group-item list-group-users">
                        <strong>#{{ forloop.counter }}</strong>
                        <a href="{% url 'profile' user.username %}"><img src="{{ user.avatar }}" class="avatar img-rounded"/>
                        {{ user.username }}</a>
                        <span class="pull-right">
                            <i>{% blocktrans with count=user.have_volumes.count %}{{ count }} volumes{% endblocktrans %}</i>
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Stats" %}</h3>
                </div>
                <ul class="list-group">
                    {% if STATS.users > 100 %}
                    <li class="list-group-item ">
                        {% trans "Users" %} <span class="pull-right badge badge-success">{{ STATS.users }}</span>
                    </li>
                    {% endif %}
                    <li class="list-group-item ">
                        {% trans "Series" %} <span class="pull-right badge badge-success">{{ STATS.series }}</span>
                    </li>
                    <li class="list-group-item ">
                        {% trans "Volumes" %} <span class="pull-right badge badge-success">{{ STATS.volumes }}</span>
                    </li>
                </ul>
            </div>


        </div>
    </div>
</div>
{% endblock %}