{% macro render_rant_card(rant, clickable=True) %}
<div class="rant-card" {% if clickable %}onclick="if (!event.target.closest('button') && !event.target.closest('.username')) { window.location.href='/rant/{{ rant.id }}'; }" style="cursor: pointer;"{% endif %}>
    <div class="rant-header">
        <div class="avatar" style="background: #{{ rant.user_avatar.b }}">
            {{ rant.user_username[0]|upper }}
        </div>
        <div class="user-info">
            <div class="username" onclick="event.stopPropagation(); window.location.href='/profile/{{ rant.user_id }}';" style="cursor: pointer;">{{ rant.user_username }}</div>
            <div class="score">{{ rant.user_score }} points</div>
        </div>
    </div>
    <div class="rant-content">{{ escape_html(rant.text) }}</div>
    {% if rant.attached_image %}
    <img src="{{ rant.attached_image }}" alt="Rant image" class="rant-image">
    {% endif %}
    {% if rant.tags %}
    <div class="tags">
        {% for tag in rant.tags %}
        <span class="tag">{{ tag }}</span>
        {% endfor %}
    </div>
    {% endif %}
    <div class="rant-footer">
        <div class="rant-actions">
            <button class="action-btn {% if rant.vote_state == 1 %}voted{% elif rant.vote_state == -1 %}downvoted{% endif %}" onclick="event.stopPropagation(); voteRant({{ rant.id }}, {{ 0 if rant.vote_state == 1 else 1 }})">
                ++ {{ rant.score }}
            </button>
            <button class="action-btn" onclick="event.stopPropagation(); window.location.href='/rant/{{ rant.id }}';">
                💬 {{ rant.num_comments }}
            </button>
        </div>
        <div>{{ format_time(rant.created_time) }}</div>
    </div>
</div>
{% endmacro %}