{% if user.is_authenticated %}
    <hr>
    <div class="add-comment">
        <form action="{% url 'comment:post_comment' object.id %}" class="commenting-form" method="post">
            {% csrf_token %}
            <div class="form-group mb-3">
                <textarea name="content" id="post-comment-content" placeholder="欢迎加入讨论" class="form-control"
                          required></textarea>
            </div>
            <div class="form-group col-md-12">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>

{% else %}
    <hr>
    <h4 style="text-align: center">请 <a href="{% url 'user:user_login' %}?next={% firstof request.path '/' %}" style="color: #7abaff;text-decoration: none">登陆</a> 后评论</h4>
{% endif %}


<div class="mt-3">
    {% load mptt_tags %}
    <h3 class="h3">一共有<span style="color: hotpink">{{ comments.count }}</span>条评论</h3>
    <hr>
    {% recursetree comments %}
        {% with comment=node %}
            <div class="comment" id="comment_elem_{{ comment.id }}">
                <div class="comment-header d-flex justify-content-between">
                    <div class="user d-flex align-items-center">
                        <div class="title">
                            <strong>{{ comment.commenter }}
                            {% if comment.reply %}
                               <span style="color: deepskyblue">---></span> {{ comment.reply }}
                            {% endif %}
                            </strong>
                            <span class="date">{{ comment.create_time }}</span>
                            {% if user.is_authenticated %}
                                <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#modal_comment_elem_{{ comment.id }}" >回复</button>
                            {% else %}
                                <a class="btn btn-secondary btn-sm" href="{% url 'user:user_login' %}?next={% firstof request.path '/' %}" >回复</a>
                            {% endif %}

                        </div>
                    </div>
                </div>
            </div>
            <p>{{ comment.content }}</p>
            <hr>
            <!-- 模态框 -->
            <div class="modal" tabindex="-1" id="modal_comment_elem_{{ comment.id }}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">回复{{ comment.commenter }}</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <!-- 模态框主体 -->
                        <form action="{% url 'comment:reply_comment' object.id comment.id %} " method="post">
                            {% csrf_token %}
                            <div class="modal-body">
                                <textarea name="content"  cols="55" rows="3" class="reply-comment-class" required></textarea>
                            </div>

                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                                <input type="submit" id="reply-comment-send" class="btn btn-primary" value="发送">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div style="margin-left: 50px">
                {% if not comment.is_leaf_node %}
                    <div class="comment" id="comment_elem_{{ comment.id }}">
                        {{ children }}
                    </div>
                {% endif %}
            </div>
        {% endwith %}
    {% endrecursetree %}

</div>