{% 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>
<div class="container-fluid">
{% if feeds|count == 0 %}
    <div class="row  justify-content-center">
        <div class="col-md-6">
            <h1>{{ _("You don't have any feeds.") }}</h1>
            <h1><a href="{{ url_for('feed.form') }}">{{ _('Add some') }}</a>, {{ _('or') }} <a href="{{ url_for('user.management') }}">{{ _('upload an OPML file.') }}</a></h1>
        </div>
    </div>
{% else %}
    <div class="row">
    <div id="sidebar" class="col-2 d-none d-lg-block">
        <ul class="nav flex-column" data-offset-top="0" data-offset-bottom="0" style="min-height: 650px;">
            <li class="nav-item feed-menu"><a class="nav-link" href="{{ gen_url(feed=0) }}">
                {% if not feed_id %}<b>{% endif %}
                    {{ _('All feeds') }}
                    <span id="total-unread" class="badge pull-right"> {% if nb_unread > 1000 %}>{% endif %}&nbsp;{{ articles.__len__() }}</span>
                {% if not feed_id %}</b>{% endif %}
            </a></li>
            <li class="nav-item feed-commands"><span class="nav-link">
                <a href="{{ url_for('article.mark_as', new_value='read') }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark all as read') }}"></i></a>
            </span></li>
        {% for fid, nbunread in unread|dictsort(by='value')|reverse %}
            <li class="nav-item feed-menu"><a class="nav-link" href="{{ gen_url(feed=fid) }}">
                {% if feed_id == fid %}<b>{% endif %}
                    {% if in_error.get(fid, 0) > 0 %}
                        <span style="background-color: {{ "red" if in_error[fid] > 2 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }}</span>
                    {% endif %}
                    <span id="unread-{{ fid }}" class="badge pull-right">{{ nbunread }}</span>
                    <!-- <img src="{{ url_for('icon.icon', url=feeds[fid].url) }}" width="16px"> -->
                    {{ feeds[fid].title | safe | truncate(25, True) }}
                {% if feed_id == fid %}</b>{% endif %}
            </a></li>
            <li class="nav-item feed-commands"><span class="nav-link">
                <a href="/feed/{{ fid }}"><i class="fa fa-info" aria-hidden="true" title="{{ _('Details') }}"></i></a>
                <a href="{{ url_for('feed.form', feed_id=fid) }}"><i class="fa fa-pencil-square-o" aria-hidden="true" title="{{ _('Edit this feed') }}"></i></a>
                <a href="{{ url_for('article.mark_as', new_value='unread', feed_id=fid) }}"><i class="fa fa-square-o" aria-hidden="true" title="{{ _('Mark this feed as unread') }}"></i></a>
                <a href="{{ url_for('article.mark_as', new_value='read', feed_id=fid) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
                <a href="{{ url_for('feed.delete', feed_id=fid) }}"><i class="fa fa-times" aria-hidden="true" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
            </span></li>
        {% endfor %}

        {% for fid, feed in feeds.items() if not fid in unread %}
            <li class="nav-item feed-menu"><a class="nav-link" href="{{ gen_url(feed=fid) }}">
                {% if in_error.get(fid, 0) > 0 %}
                    <span style="background-color: {{ "red" if in_error[fid] > 2 else "orange" }} ;" class="badge pull-right" title="Some errors occured while trying to retrieve that feed.">{{ in_error[fid] }}</span>
                {% endif %}
                {% if feed_id == fid %}<b>{% endif %}
                    <!-- <img src="{{ url_for('icon.icon', url=feeds[fid].url) }}" width="16px"> -->
                    {{ feed.title | safe | truncate(25, True) }}
                {% if feed_id == fid %}</b>{% endif %}
            </a></li>
            <li class="nav-item feed-commands"><span class="nav-link">
                <a href="/feed/{{ fid }}"><i class="fa fa-info" aria-hidden="true" title="{{ _('Details') }}"></i></a>
                <a href="{{ url_for('feed.form', feed_id=fid) }}"><i class="fa fa-pencil-square-o" aria-hidden="true" title="{{ _('Edit this feed') }}"></i></a>
                <a href="{{ url_for('article.mark_as', new_value='unread', feed_id=fid) }}"><i class="fa fa-square-o" aria-hidden="true" title="{{ _('Mark this feed as unread') }}"></i></a>
                <a href="{{ url_for('article.mark_as', new_value='read', feed_id=fid) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
                <a href="{{ url_for('feed.delete', feed_id=fid) }}"><i class="fa fa-times" aria-hidden="true" title="{{ _('Delete this feed') }}" onclick="return confirm('{{ _('You are going to delete this feed.') }}');"></i></a>
            </span></li>
        {% endfor %}
        </ul>
    </div>
    <div class="col-md-12 col-lg-10">
        <div id="filters" data-filter="{{ filter_ }}">
            <ul class="nav nav-tabs ml-auto">
                <li id="tab-all" class="nav-item">
                    <a class="nav-link {% if filter_ == 'all' %}active{% endif %}" href="{{ gen_url(filter_='all') }}">{{ _('All') }}</a>
                </li>
                <li id="tab-read" class="nav-item">
                    <a class="nav-link {% if filter_ == 'read' %}active{% endif %}" href="{{ gen_url(filter_='read') }}">{{ _('Read') }}</a>
                </li>
                <li id="tab-unread" class="nav-item">
                    <a class="nav-link {% if filter_ == 'unread' %}active{% endif %}" href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a>
                </li>
                <li id="tab-unread" class="px-5 nav-item">
                    <a class="nav-link {% if liked %}active{% endif %}" href="{{ gen_url(liked=not liked) }}"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;{{ _('Liked') }}</a>
                </li>
                <li id="tab-nbdisplay" class="px-5 nav-item d-none d-lg-block">
                    <div id="nbdisplay">
                        <a href="{{ gen_url(limit=10) }}" class="badge {% if limit == 10 %}badge-primary{% else %}badge-info{% endif %}">{{ _(10) }}</a>
                        <a href="{{ gen_url(limit=100) }}" class="badge {% if limit == 100 %}badge-primary{% else %}badge-info{% endif %}">{{ _(100) }}</a>
                        <a href="{{ gen_url(limit=1000) }}" class="badge {% if limit == 1000 %}badge-primary{% else %}badge-info{% endif %}">{{ _(1000) }}</a>
                        <a href="{{ gen_url(limit='all') }}" class="badge {% if limit == 'all' %}badge-primary{% else %}badge-info{% endif %}">{{ _('All') }}</a>
                    </div>
                </li>
            </ul>
        </div>
        {% if articles | count != 0%}
            <div class="table-responsive">
                <table class="table table-striped strict-table">
                    <thead>
                        <tr>
                            <th>
                                {% if feed_id %}
                                    <a href="{{ url_for('article.mark_as', new_value='read', feed_id=feed_id) }}"><i class="fa fa-check-square-o" aria-hidden="true" title="{{ _('Mark this feed as read') }}"></i></a>
                                {% endif%}
                            </th>
                            {% if not feed_id %}
                                <th>{{ _('Feed') }}</th>
                            {% endif %}
                            <th>{{ _('Article') }}</th>
                            <th>{{ _('Date') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for article in articles %}
                        <tr data-article="{{ article.id }}" data-feed="{{ article.feed_id }}">
                            <td>
                                <a href="#"><i class="fa fa-times delete" aria-hidden="true" title="{{ _('Delete this article') }}"></i></a>
                                {% if article.like %}
                                    <a href="#"><i class="fa fa-star like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a>
                                {% else %}
                                    <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
                                {% endif %}
                                {% if article.readed %}
                                    <a href="#"><i class="fa fa-square-o readed" aria-hidden="true" title="{{ _('Mark this article as unread') }}"></i></a>
                                {% else %}
                                    <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
                                    {% if filter_ == 'all' %}</b>{% endif %}
                                {% endif %}
                            </td>
                            {% if not feed_id %}
                                <td><a href="/article/redirect/{{ article.id}}" target="_blank">{{ article.source.title | safe }}</a></td>
                            {% endif %}
                            <td {%if filter_ == 'all' and article.readed == False %}style='font-weight:bold'{% endif %}>
                                <a href="/article/{{ article.id }}">{{ article.title | safe }}</a>
                            </td>
                            <td class="date">{{ article.date | datetime(format='short') }}</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
    </div>
{% endif %}
</div>
{% endblock %}