{% extends "base.html" %}

{% block content %}
<div class="filters">
    <a href="{{ url_for('index') }}" class="{% if not current_category %}active{% endif %}">all</a>
    {% for cat in categories %}
        <a href="{{ url_for('index', category=cat.category) }}" class="{% if current_category == cat.category %}active{% endif %}">{{ cat.category }} ({{ cat.count }})</a>
    {% endfor %}
</div>

<ol class="article-list">
    {% for article in articles %}
    <li class="article-item">
        <span class="rank">{{ loop.index }}.</span>
        <form class="vote-form" action="{{ url_for('vote', article_id=article.id) }}" method="post">
            <button type="submit" class="vote-btn" aria-label="upvote">&#9650;</button>
        </form>
        <div>
            <div class="title-line">
                {% if article.url %}
                    <a href="{{ article.url }}" class="title" target="_blank" rel="noopener">{{ article.title }}</a>
                    <span class="domain">({{ article.url.split('/')[2] }})</span>
                {% else %}
                    <a href="{{ url_for('article', article_id=article.id) }}" class="title">{{ article.title }}</a>
                {% endif %}
                <span class="category-tag">{{ article.category }}</span>
            </div>
            <div class="meta">
                {{ article.votes }} point{{ 's' if article.votes != 1 else '' }}
                | <a href="{{ url_for('article', article_id=article.id) }}">{{ article.comment_count or 0 }} comment{{ 's' if (article.comment_count or 0) != 1 else '' }}</a>
            </div>
        </div>
    </li>
    {% else %}
    <li class="article-item">No articles yet. <a href="{{ url_for('submit') }}">Submit the first one!</a></li>
    {% endfor %}
</ol>
{% endblock %}