{% init comment_source_class = "" %}
{% init show_comment_edit = False %}
{% init note_user_id = 0 %}

{% if len(comments) == 0 %}
    <div class="card">
        {% include common/text/empty_text.html %}
    </div>
{% end %}

{% for comment in comments %}
    <div class="comment-row">
        <span class="hide">{{comment.user_id}}</span>
        {% if comment.pin_level > 0 %}
            <span class="orange">[置顶]</span>
        {% end %}
        <span class="comment-user">{{comment.user}}</span>
        <div class="comment-time">{{comment.ctime}}</div>
        <div class="comment-content">{% raw comment.html %}</div>
        <div class="comment-foot">
            {% if show_note %}
                <div class="comment-source-info">
                    <span>[来源]</span>
                    <a class="comment-foot-link" href="{{comment.note_url}}">{{comment.note_name}}</a>
                </div>
            {% end %}
            
            {% if show_comment_edit and _user_id == comment.user_id %}
                <a class="btn btn-default edit-comment-btn" data-id="{{comment.id}}">编辑</a>
            {% end %}

            <div class="float-right">
                {% if note_user_id == _user_id %}
                    {% if comment.pin_level > 0 %}
                        <a class="btn btn-default" data-id="{{comment.id}}" onclick="xnote.note.pinComment(this, 0)">取消置顶</a>
                    {% else %}
                        <a class="btn btn-default" data-id="{{comment.id}}" onclick="xnote.note.pinComment(this, 1)">置顶</a>
                    {% end %}
                {% end %}

                {% if _user_id == comment.user_id %}
                    <a class="btn btn-default delete-comment-btn" data-id="{{comment.id}}" data-content="{{comment.content}}">删除</a>
                {% end %}
            </div>
        </div>
    </div>
{% end %}

{% if page_max > 1 %}
    {% include common/pagination.html %}
{% end %}

<script>
    $(".msg-img").on("load", function() {
        // console.log("update msg-img-box height", $(this));
        // adjust msg-img-box height
        var $ele = $(this).parent(".msg-img-box");
        // console.log("parents", $ele);

        var maxHeight = 0;
        var children = $ele.children(".msg-img");
        for (var i = 0; i < children.length; i++) {
            var child = $(children[i]);
            var height = child.height();
            if (height > maxHeight) {
                maxHeight = height;
            }
        }
        if ($ele.hasClass("mutli")) {
            maxHeight += 10;
        }
        if (maxHeight > 0) {
            $ele.height(maxHeight);
        }
    });
</script>