<section class="my-2">
    <div class="card">
        <div class="card-header">
            {{comment.author}}: {{comment.created}}
        </div>
        <div class="card-body">
            <div class="card-text">
                {{ comment.content }}
            </div>
        </div>
        {% if user.is_authenticated and comment.author == user%}
            <div class="card-footer">
                <button
                    type="button"
                    class="btn btn-outline-primary"
                    hx-get="{% url 'comments:hx_edit_comment' comment.id %}"
                    hx-target="closest section"
                    hx-swap="outerHTML"
                >Edit</button>
                <button
                    type="button"
                    class="btn btn-outline-primary"
                    hx-delete="{% url 'comments:hx_del_comment' comment.id %}"
                    hx-confirm="Are you sure you want to delete this comment?"
                    hx-target="closest section"
                    hx-swap="outerHTML swap:1s"
                >Delete</button>
                {% include './toggle.html' %}
            </div>
        {% endif %}
    </div>
</section>
