{% extends "layout.html" %}
{% block content %}
<style>
    li.feed-commands {display: none; text-align: right;}
    li.feed-commands > span > a {margin-right: 10px;}
    li.feed-menu:hover + li.feed-commands, li.feed-commands:hover {display: block;}
</style>
{% if feeds|count == 0 %}
    <div class="col-md-4 col-md-offset-4">
        <h1>{{ _("You don't have any feeds.") }}</h1>
        <h1><a href="/create_feed">{{ _('Add some') }}</a>, {{ _('or') }} <a href="/management#import">{{ _('upload an OPML file.') }}</a></h1>
    </div>
{% else %}
    <div id="affix-nav" class="col-md-3 sidebar hidden-xs hidden-sm">
        <ul class="nav sidenav navbar-collapse pre-scrollable" data-offset-top="0" data-offset-bottom="0" style="min-height: 600px;">
            <li><a href="{{ gen_url(feed=0) }}">
                {% if not feed_id %}<b>{% endif %}
                    {{ _('All feeds') }}
                {% if not feed_id %}</b>{% endif %}
            </a></li>
        {% for fid, nbunread in unread|dictsort(by='value')|reverse %}
            <li class="feed-menu"><a href="{{ gen_url(feed=fid) }}">
                {% if feed_id == fid %}<b>{% endif %}
                    <span id="unread-{{ fid }}" class="badge pull-right">{{ nbunread }}</span>
                    {{ feeds[fid]|safe }}
                {% if feed_id == fid %}</b>{% endif %}
            </a></li>
            <li class="feed-commands"><span>
                <a href="/articles/{{ fid }}/100"><i class="glyphicon glyphicon-th-list" title="{{ _('Articles') }}"></i></a>
                <a href="/edit_feed/{{ fid }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
                <a href="/delete_feed/{{ fid }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
                <a href="/mark_as/read/feed/{{ fid }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
                <a href="/mark_as/unread/feed/{{ fid }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
            </span></li>
        {% endfor %}
        {% for fid, ftitle in feeds|dictsort(case_sensitive=False, by='value') if not fid in unread %}
            <li class="feed-menu"><a href="{{ gen_url(feed=fid) }}">
                {% if feed_id == fid %}<b>{% endif %}
                    {{ ftitle|safe }}
                {% if feed_id == fid %}</b>{% endif %}
            </a></li>
            <li class="feed-commands"><span>
                <a href="/articles/{{ fid }}/100"><i class="glyphicon glyphicon-th-list" title="{{ _('Articles') }}"></i></a>
                <a href="/edit_feed/{{ fid }}"><i class="glyphicon glyphicon-edit" title="{{ _('Edit this feed') }}"></i></a>
                <a href="/delete_feed/{{ fid }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
                <a href="/mark_as/read/feed/{{ fid }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this feed as read') }}"></i></a>
                <a href="/mark_as/unread/feed/{{ fid }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this feed as unread') }}"></i></a>
            </span></li>
        {% endfor %}
        </ul>
    </div>
    <div class="container col-md-9">
        <h1>{{ _('Articles') }} (<span id="total-unread">{{ articles.__len__() }}</span>)</h1>
        <div id="filters" data-filter="{{ filter_ }}">
            {% if filter_ == 'all' %}<b>{% endif %}
                <a href="{{ gen_url(filter_='all') }}">{{ _('All') }}</a>
            {% if filter_ == 'all' %}</b>{% endif %}
            |
            {% if filter_ == 'read' %}<b>{% endif %}
                <a href="{{ gen_url(filter_='read') }}">{{ _('Read') }}</a>
            {% if filter_ == 'read' %}</b>{% endif %}
            |
            {% if filter_ == 'unread' %}<b>{% endif %}
                <a href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a>
            {% if filter_ == 'unread' %}</b>{% endif %}
            -
            {% if limit == 10 %}<b>{% endif %}
                <a href="{{ gen_url(limit=10) }}">{{ _(10) }}</a>
            {% if limit == 10 %}</b>{% endif %}
            |
            {% if limit == 100 %}<b>{% endif %}
                <a href="{{ gen_url(limit=100) }}">{{ _(100) }}</a>
            {% if limit == 100 %}</b>{% endif %}
            |
            {% if limit == 1000 %}<b>{% endif %}
                <a href="{{ gen_url(limit=1000) }}">{{ _(1000) }}</a>
            {% if limit == 1000 %}</b>{% endif %}
            |
            {% if limit == 'all' %}<b>{% endif %}
                <a href="{{ gen_url(limit='all') }}">{{ _('All') }}</a>
            {% if limit == 'all' %}</b>{% endif %}
        </div>
        {% if articles | count != 0%}
            <div class="table-responsive">
                <table class="table table-striped strict-table">
                    <thead>
                        <tr>
                            <th>{{ _('Feed') }}</th>
                            <th>{{ _('Article') }}</th>
                            <th>{{ _('Date') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for article in articles %}
                        <tr data-article="{{ article.id }}" data-feed="{{ article.feed_id }}">
                            <td><a href="/article/redirect/{{ article.id}}" target="_blank">{{ article.source.title|safe }}</a></td>
                            <td>
                                {% if filter_ == 'all' and article.readed == False %}<b>{% endif %}
                                <a href="/article/{{ article.id }}">{{ article.title|safe }}</a>
                                {% if filter_ == 'all' and article.readed == False %}</b>{% endif %}
                            </td>
                            <td class="date">{{ article.date|datetime }}</a></td>
                            <td>
                                <a href="#"><i class="glyphicon glyphicon-remove delete" title="{{ _('Delete this article') }}"></i></a>
                                {% if article.like %}
                                    <a href="#"><i class="glyphicon glyphicon-star like" title="{{ _('One of your favorites') }}"></i></a>
                                {% else %}
                                    <a href="#"><i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i></a>
                                {% endif %}
                                {% if article.readed %}
                                    <a href="#"><i class="glyphicon glyphicon-unchecked readed" title="{{ _('Mark this article as unread') }}"></i></a>
                                {% else %}
                                    <a href="#"><i class="glyphicon glyphicon-check readed" title="{{ _('Mark this article as read') }}"></i></a>
                                    {% if filter_ == 'all' %}</b>{% endif %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <br />
            <div class="alert alert-info alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                {% if filter_ == 'all' %}
                    <strong>{{ _('Oh!') }}</strong> {{ _('This feed is empty.') }}
                {% elif filter_ == 'read' %}
                    <strong>{{ _('Work for you!') }}</strong> {{ _('All articles are unread.') }}
                {% elif filter_ == 'unread' %}
                    <strong>{{ _('Well done!') }}</strong> {{ _('You read all articles.') }}
                {% endif %}
            </div>
        {% endif %}
    </div><!-- /.container -->
{% endif %}
{% endblock %}