<div class="bg-gray-900 border border-gray-800 rounded-lg p-6 mb-4">
    <div class="flex items-start justify-between mb-4">
        <div class="flex items-center">
            <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center mr-3">
                <span class="text-white font-medium">{{ comment.user.username|first|upper }}</span>
            </div>
            <div>
                <p class="text-white font-medium">{{ comment.user.username }}</p>
                <p class="text-gray-500 text-sm">{{ comment.created_at|date:"Y年m月d日 H:i" }}</p>
            </div>
        </div>
        {% if comment.user == user %}
            <form method="post" action="{% url 'delete_comment' comment.pk %}" class="inline">
                {% csrf_token %}
                <button type="submit"
                        onclick="return confirm('确定要删除这条评论吗？')"
                        class="text-red-400 hover:text-red-300 text-sm">
                    删除
                </button>
            </form>
        {% endif %}
    </div>

    {% if comment.text %}
        <div class="text-white mb-4 leading-relaxed">{{ comment.text|linebreaks }}</div>
    {% endif %}

    {% if comment.image %}
        <div class="mt-4">
            <img src="{{ comment.image.url }}"
                 alt="评论图片"
                 class="max-w-full h-auto rounded-lg border border-gray-800 max-h-96 object-contain">
        </div>
    {% endif %}
</div>