{% 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 %}