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