{% extends "layout.html" %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <form class="form-inline">
                <div class="form-group">
                    <label>Filter per category</label>
                    <select class="form-control" id="category-select" name="category_id">
                    <option  value="0">All</option>
                    {% for cur_category in user.categories %}
                        <option value="{{cur_category.id}}" {% if cur_category.id==category.id %}selected{% endif %}>{{ cur_category.name }}</option>
                    {% endfor %}
                    </select>
                    <button type="submit" class="btn btn-primary mb-2">OK</button>
                </div>
            </form>
        </div>
    </div>

    <br /><br />

    {% if category %}
    <div class="row">
        <div class="col-md-8 offset-md-1">
            <p class="lead">Articles from the category <a href="{{ url_for('user.profile_public', nickname=user.nickname, category_id=category.id) }}">{{ category.name }}</a></p>
        </div>
    </div>
    {% endif %}

    <div class="row">
        <div class="col-md-8 offset-md-1">
            {{ pagination.info }}
        </div>
    </div>

    <div class="row">
       <div class="col-md-8 offset-md-1">
           {{ pagination.links }}
       </div>
   </div>

    <div class="table-responsive">
        <table id="table-feeds" class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{{ _('Title') }}</th>
                    <th>{{ _('Published at') }}</th>
                </tr>
            </thead>
            <tbody>
            {% for article in articles %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td><a href="{{ url_for('article.article_pub', article_id=article.id) }}">{{ article.title }}</a></td>
                    <td>{{ article.date }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="row">
       <div class="col-md-8 offset-md-1">
           {{ pagination.links }}
       </div>
   </div>
</div><!-- /.container -->
{% endblock %}