{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2>{{ post.post_name }}</h2>
    <p>Created by {{ post.created_by }} - {{ post.creation_date.strftime('%Y-%m-%d %H:%M') }}</p>
    <hr>
    <div>
        <p>{{ post.text }}</p>
        {% for media in post.media %}
        <div class="mt-4">
            <img src="/uploads/{{ media.filename }}" alt="Media" class="img-fluid">
        </div>
        {% endfor %}
    </div>

        <div class="d-flex justify-content-between align-items-center mt-4">
            <div>
                <a href="{{ url_for('upvote_post', post_id=post.id) }}" class="btn btn-sm btn-success"><i class="fas fa-arrow-up"></i> Upvote ({{ post.upvotes }})</a>
                <a href="{{ url_for('downvote_post', post_id=post.id) }}" class="btn btn-sm btn-danger"><i class="fas fa-arrow-down"></i> Downvote ({{ post.downvotes }})</a>
            </div>
            <div>
                <h3 class="mt-4">{{ comment_count }} Comments</h3>
            </div>
        </div>

    {% if comments %}
    <div class="mt-4">
        <ul class="list-group">
            {% for comment in comments %}
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center">
                    <strong>{{ comment.created_by }}</strong>
                    <span>{{ comment.creation_date.strftime('%Y-%m-%d %H:%M') }}</span>
                </div>
                <p>{{ comment.text }}</p>
                <div>
                    <a href="{{ url_for('upvote_comment', comment_id=comment.id) }}" class="btn btn-sm btn-success"><i class="fas fa-arrow-up"></i> Upvote ({{ comment.upvotes }})</a>
                    <a href="{{ url_for('downvote_comment', comment_id=comment.id) }}" class="btn btn-sm btn-danger"><i class="fas fa-arrow-down"></i> Downvote ({{ comment.downvotes }})</a></br></br>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% else %}
    <p class="mt-4">No comments yet. Be the first to comment!</p>
    {% endif %}

    {% if g.user %}
    <div class="mt-4">
        <h3>Add a Comment</h3>
        <form method="POST">
            <input type="hidden" name="created_by" value="{{ g.user.username }}">
            <div class="form-group">
                <textarea class="form-control" id="comment" name="text" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    {% else %}
    <p class="mt-4">Log in to leave a comment.</p>
    {% endif %}
</div>
{% endblock %}