{% extends "layout.html" %}
{% block content %}
<div class="container">
    {% if feeds|count == 0  %}
        <div class="page-header">
            <h1>{{ _('No unread articles') }}</h1>
        </div>
    {% else %}
        <div class="page-header">
            <h1>{{ _('Unread articles') }} <small>{{ nb_unread }}</small></h1>
        </div>
        {% for feed in feeds|sort(attribute="title") %}
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                <h1>{{ feed.title|safe }}</h1>
                <a href="/articles/{{ feed.id }}/100"><i class="glyphicon glyphicon-th-list" title="{{ _('More articles') }}"></i></a>
                <a href="/feed/{{ feed.id }}"><i class="glyphicon glyphicon-info-sign" title="{{ _('Details') }}"></i></a>
                <a href="/edit_feed/{{ feed.id }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
                <a href="/mark_as/read/feed/{{ feed.id }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark all feed as read') }}"></i></a>
                <a href="/mark_as/unread/feed/{{ feed.id }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark all feed as unread') }}"></i></a>
                <h3>{{ feed.articles|length }} {{ _('unread articles') }}.</h3>
                </div>
            </div>
            {% for number in range(0, feed.articles|length-(feed.articles|length % 3), 3) %}
                <div class="row">
                    {% for n in range(number, number+3) %}
                    <div class="col-xs-6 col-sm-4 col-md-4">
                        {% if feed.articles[n].readed %}<h3>{% else %}<h1>{% endif %}
                            <a href="/article/{{ feed.articles[n].id }}">{{ feed.articles[n].title|safe }}</a>
                        {% if feed.articles[n].readed %}</h3>{% else %}</h1>{% endif %}
                        <h6>{{ feed.articles[n].date | datetime }}</h6>
                    </div>
                    {% endfor %}
                </div>
            {% endfor %}
            {% if feed.articles|length % 3 != 0 %}
                <div class="row">
                    {% for n in range(feed.articles|length-(feed.articles|length % 3), feed.articles|length) %}
                        <div class="col-xs-6 col-sm-4 col-md-4">
                            {% if feed.articles[n].readed %}<h3>{% else %}<h1>{% endif %}
                                <a href="/article/{{ feed.articles[n].id }}">{{ feed.articles[n].title|safe }}</a>
                            {% if feed.articles[n].readed %}</h3>{% else %}</h1>{% endif %}
                            <h6>{{ feed.articles[n].date | datetime }}</h6>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div><!-- /.container -->
{% endblock %}