{% load mptt_tags %}
{% load comments_tags %}
{% if comments_enabled %}
<div class="comment-tree mt-4">
      <!-- 主评论表单 -->
  {% if user.is_authenticated %}
  <div class="card mb-4">
    <div class="card-body">
      <h5 class="card-title">发表评论</h5>
      <form method="post" action="{% url 'comments:comment_add' %}">
        {% csrf_token %}
        <input type="hidden" name="content_type" value="{{ target|get_content_type_id }}">
        <input type="hidden" name="object_id" value="{{ target.id }}">
        
        <div class="mb-3">
          <textarea name="content" class="form-control" 
                    placeholder="请输入评论内容" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交评论</button>
      </form>
    </div>
  </div>
</div>
{% else %}
  <div class="alert alert-info">
     请<a href="{% comment %}{% url 'account:login' %}{% endcomment %}?next={{ request.path }}" class="alert-link">登录</a>后发表评论 
  </div>
{% endif %}
  <!-- 评论列表 -->
  <div class="list-group">
    {% recursetree comments %}
      <div class="list-group-item border-0 py-3 px-0" data-comment-id="{{ node.id }}">
        <!-- 主评论内容 -->
        <div class="d-flex align-items-center mb-2">
          <span class="badge bg-primary me-2">#{{ node.id }}</span>
          <strong class="me-3">{{ node.author.username }}</strong>
          <small class="text-muted">{{ node.create_time|timesince }}前</small>
        </div>
        
        <!-- 评论正文 -->
        <div class="mb-2">{{ node.content }}</div>

        <!-- 回复操作区 -->
        <div class="d-flex gap-2">
          <button class="btn btn-outline-primary btn-sm reply-trigger" 
                  data-parent-id="{{ node.id }}">
            <i class="bi bi-reply"></i> 回复
          </button>
          {% if node.parent %}
          <span class="text-muted">
            回复给 #{{ node.parent.id }}
          </span>
          {% endif %}
        </div>

        <!-- 嵌套回复（递归部分） -->
        {% if not node.is_leaf_node %}
          <div class="ms-4 mt-3 border-start ps-3">
            {{ children }}
          </div>
        {% endif %}
      </div>
    {% endrecursetree %}
  </div>

  <!-- 回复表单模板（初始隐藏） -->
  <!-- 回复表单模板 -->
<div class="reply-form-container mt-3 d-none">
    <form method="post" class="card" action="{% url 'comments:comment_add' %}">
      {% csrf_token %}
      <div class="card-body">
        <input type="hidden" name="content_type" value="{{ target|get_content_type_id }}">
        <input type="hidden" name="object_id" value="{{ target.id }}">
        <input type="hidden" name="parent">  <!-- 移除ID -->
  
        <div class="mb-3">
          <textarea name="content" class="form-control" 
                   placeholder="输入回复内容" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">提交回复</button>
        <button type="button" class="btn btn-outline-secondary btn-sm cancel-reply">
          取消
        </button>
      </div>
    </form>
  </div>
</div>
<!-- 交互脚本 -->
<script>
    // 更新后的回复逻辑
    document.querySelectorAll('.reply-trigger').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const parentId = e.currentTarget.dataset.parentId;
        const formContainer = document.querySelector('.reply-form-container');
        console.log('parentId==>',parentId)
        // 清理现有表单
        document.querySelectorAll('.reply-form-container:not(.d-none)').forEach(f => f.remove());
        
        // 克隆并配置新表单
        const newForm = formContainer.cloneNode(true);
        newForm.classList.remove('d-none');
        newForm.querySelector('input[name="parent"]').value = parentId; // ⭐ 正确设置值
        
        // 定位插入位置
        const commentNode = e.target.closest('[data-comment-id]');
        commentNode.insertAdjacentElement('afterend', newForm);
        
        // 自动聚焦到文本域
        newForm.querySelector('textarea').focus();
      });
    });
    
    // 取消按钮事件
    document.addEventListener('click', (e) => {
      if (e.target.closest('.cancel-reply')) {
        e.target.closest('.reply-form-container').remove();
      }
    });
    </script>

<style>
  .comment-tree .list-group-item {
    transition: background 0.2s;
  }
  .comment-tree .border-start {
    border-color: #dee2e6!important;
  }
  .comment-tree .reply-form-container .card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
  }
</style>
{% endif %}