{% extends "layout.html" %}
{% block content %}
<div class="container">
    <div class="jumbotron">
        <h2><a href="{{ feed.site_link  }}">{{ feed.title }}</a></h2>
        <h3>{{ feed.articles|length  }} articles.</h3>
    </div>
    {% for number in range(0, feed.articles|length-2, 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 }}</a><h2>
                  {% if feed.articles[n].readed %}</h3>{% else %}</h1>{% endif %}
                <h6>{{ feed.articles[n].date }}</h6>
            </div>
            {% endfor %}
        </div>
    {% endfor %}
    {% if feed.articles|length % 3 !=0 %}
        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-4">
                 {% if feed.articles[feed.articles|length-2].readed %}<h3>{% else %}<h1>{% endif %}
                     <a href="/article/{{ feed.articles[feed.articles|length-2].id }}">{{ feed.articles[feed.articles|length-2].title }}</a><h2>
                  {% if feed.articles[feed.articles|length-2].readed %}</h3>{% else %}</h1>{% endif %}
                <h6>{{ feed.articles[feed.articles|length-2].date }}</h6>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
                 {% if feed.articles[feed.articles|length-1].readed %}<h3>{% else %}<h1>{% endif %}
                     <a href="/article/{{ feed.articles[feed.articles|length-1].id }}">{{ feed.articles[feed.articles|length-1].title }}</a><h2>
                  {% if feed.articles[feed.articles|length-1].readed %}</h3>{% else %}</h1>{% endif %}
                <h6>{{ feed.articles[feed.articles|length-1].date }}</h6>
            </div>
        </div>
    {% endif %}
</div><!-- /.container -->
{% endblock %}