|
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<a href="/" class="btn btn-secondary">← Back to Feed</a>
|
|
<div class="rant-card" style="margin-top: 1rem; cursor: default;">
|
|
<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="window.location.href='/profile/{{ rant.user_id }}';" style="cursor: pointer;">{{ rant.user_username }}</div>
|
|
<div class="score">{{ rant.user_score }} points</div>
|
|
</div>
|
|
{% if current_user and current_user.id == rant.user_id %}
|
|
<button class="btn btn-secondary" onclick="showModal('edit-rant')">Edit</button>
|
|
<button class="btn btn-secondary" onclick="deleteRant({{ rant.id }})" style="margin-left: 0.5rem;">Delete</button>
|
|
{% endif %}
|
|
</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{% endif %}" onclick="voteRant({{ rant.id }}, {{ 0 if rant.vote_state == 1 else 1 }})">
|
|
++ {{ rant.score }}
|
|
</button>
|
|
<button class="action-btn {% if rant.vote_state == -1 %}downvoted{% endif %}" onclick="voteRant({{ rant.id }}, {{ 0 if rant.vote_state == -1 else -1 }})">
|
|
--
|
|
</button>
|
|
<button class="action-btn {% if subscribed %}voted{% endif %}" onclick="toggleFavorite({{ rant.id }}, {{ subscribed }})">
|
|
{% if subscribed %}★{% else %}☆{% endif %} Favorite
|
|
</button>
|
|
</div>
|
|
<div>{{ format_time(rant.created_time) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comments-section">
|
|
<h3>Comments ({{ comments|length }})</h3>
|
|
<div id="commentsList">
|
|
{% for comment in comments %}
|
|
<div class="comment">
|
|
<div class="rant-header">
|
|
<div class="avatar" style="background: #{{ comment.user_avatar.b }}">
|
|
{{ comment.user_username[0]|upper }}
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="username" onclick="window.location.href='/profile/{{ comment.user_id }}';" style="cursor: pointer;">{{ comment.user_username }}</div>
|
|
<div class="score">{{ comment.user_score }} points</div>
|
|
</div>
|
|
{% if current_user and current_user.id == comment.user_id %}
|
|
<button class="btn btn-secondary" onclick="deleteComment({{ comment.id }})">Delete</button>
|
|
{% endif %}
|
|
</div>
|
|
<div class="rant-content">{{ escape_html(comment.body) }}</div>
|
|
<div class="rant-footer">
|
|
<div class="rant-actions">
|
|
<button class="action-btn {% if comment.vote_state == 1 %}voted{% endif %}" onclick="voteComment({{ comment.id }}, {{ 0 if comment.vote_state == 1 else 1 }})">
|
|
++ {{ comment.score }}
|
|
</button>
|
|
</div>
|
|
<div>{{ format_time(comment.created_time) }}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if current_user %}
|
|
<form class="comment-form" onsubmit="submitComment(event); return false;">
|
|
<h4>Add a comment</h4>
|
|
<div class="form-group">
|
|
<textarea name="comment" placeholder="Write your comment..." required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn">Post Comment</button>
|
|
</form>
|
|
{% else %}
|
|
<p style="text-align: center; margin-top: 2rem;">Login to comment</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
async function submitComment(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.target);
|
|
|
|
const data = await apiCall(`/rant/rants/{{ rant.id }}/comments`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (data.success) {
|
|
location.reload();
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|