{% extends "base.html" %}

{% block title %}{{ group.name }} - Post by {{ post.author.username }}{% endblock %}

{% block content %}
<div class="container">
    <h1>{{ group.name }}</h1>
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">{{ post.author.username }}</h5>
            <p class="card-text">{{ post.content|safe }}</p>
            <p class="card-text"><small class="text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small></p>
            <button class="btn btn-primary btn-sm like-btn" data-post-id="{{ post.id }}">
                <i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
            </button>
            <button class="btn btn-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
                <i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
            </button>
        </div>
        <div class="card-footer comment-section" id="comment-section-{{ post.id }}">
            <h6>Comments:</h6>
            <ul class="list-unstyled">
                {% for comment in post.comments %}
                    {% include 'comment.html' %}
                {% endfor %}
            </ul>
            <form class="comment-form" data-post-id="{{ post.id }}">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Add a comment" name="content" required>
                    <button class="btn btn-outline-secondary" type="submit">Send</button>
                </div>
            </form>
        </div>
    </div>
    <a href="{{ url_for('group_detail', vanity_url=group.vanity_url) }}" class="btn btn-secondary">Back to Group</a>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// Add your JavaScript for likes and comments here, similar to the post_detail.html template
</script>
{% endblock %}