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

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

{% block main_content %}
{% regroup items by first_letter as letter_list %}
<div class="container">
    <div class="pull-right">
        <ul class="pagination">
        {% for letter in letters %}
            <li {% if current_letter == letter|lower %}class="active"{% endif %}>
                <a href="{% url 'series.list' %}?letter={{ letter|lower }}">{{ letter }}</a>
            </li>
        {% endfor %}
            <li {% if current_letter == 'other' %}class="active"{% endif %}>
                <a href="{% url 'series.list' %}?letter=other">{% trans "other" %}</a>
            </li>
        </ul>
    </div>
    <div class="clearfix"></div>
    <div class="column-list">
        {% if current_letter != 'all' %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" id="{{ current_letter }}">{{ current_letter }}</h3>
            </div>
            <ul class="list-group">
                {% for item in items %}
                <li class="list-group-item">
                    {% if item.slug %}
                    <a href="{% url "series.detail" item.pk item.slug %}">{{ item.name }}</a>
                    {% else %}
                    <a href="{% url "series.detail" item.pk %}">{{ item.name }}</a>
                    {% endif %}
                </li>
                {% empty %}
                <li class="list-group-item">{% trans "No results" %}</li>
                {% endfor %}
            </ul>
        </div>
        {% else %}
            {% for letter in letter_list %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="{{ letter.grouper }}">{{ letter.grouper }}</h3>
                </div>
                <ul class="list-group">
                    {% for item in letter.list %}
                    <li class="list-group-item">
                        {% if item.slug %}
                        <a href="{% url "series.detail" item.pk item.slug %}">{{ item.name }}</a>
                        {% else %}
                        <a href="{% url "series.detail" item.pk %}">{{ item.name }}</a>
                        {% endif %}
                    </li>
                    {% empty %}
                    <li class="list-group-item">{% trans "No results" %}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        {% endif %}
    </div>
</div>
{% endblock %}