{% extends 'base.html' %}
{% from 'components/rant_card.html' import render_rant_card %}

{% block navigation %}
{% include '_header.html' %}
{% endblock %}

{% block content %}
<div class="sort-options">
    <a href="/?sort=recent" class="sort-btn {% if current_sort == 'recent' %}active{% endif %}">Recent</a>
    <a href="/?sort=top" class="sort-btn {% if current_sort == 'top' %}active{% endif %}">Top</a>
    <a href="/?sort=algo" class="sort-btn {% if current_sort == 'algo' %}active{% endif %}">Algorithm</a>
</div>

<div>
    {% for rant in rants %}
        {{ render_rant_card(rant) }}
    {% endfor %}
</div>
{% endblock %}