{% 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_str}}</div>
        {% if comment.html %}
        <div class="comment-content">
            {% if comment.ref_user %}
                <span class="comment-reply-at">@{{comment.ref_user}}</span>
            {% end %}
            {% raw comment.html %}
        </div>
        {% end %}

        {% if comment.files %}
            <div class="comment-img-row">
            {% for _img_src in comment.files %}
                <img class="comment-img x-photo" alt="{{_img_src}}" src="{{_img_src}}?mode=thumbnail" data-src="{{_img_src}}">
            {% end %}
            </div>
        {% end %}

        <div class="comment-foot">
            {% if show_note %}
                <span class="comment-source-info btn-line-height">
                    <span>[来源]</span>
                    <a class="comment-foot-link" href="{{comment.note_url}}">{{comment.note_name}}</a>
                </span>
            {% end %}
            
            {% if show_comment_edit and _user_id == comment.user_id %}
                <a class="btn btn-default" data-id="{{comment.id}}" onclick="xnote.comment.openEditDialog(this)">编辑</a>
            {% end %}

            {% if comment.reply_count > 0 %}
                <span class="comment-reply-info">
                    <a class="btn btn-default" data-id="{{comment.id}}" 
                    data-user="{{comment.user}}"
                    data-user-id="{{comment.user_id}}"
                    data-note-id="{{comment.note_id}}"
                    onclick="xnote.comment.viewReplies(this)">
                        查看{{comment.reply_count}}条回复
                    </a>
                </span>
            {% elif _user_id > 0 %}
                <a class="btn btn-default" 
                    data-id="{{comment.id}}" 
                    data-user="{{comment.user}}"
                    data-user-id="{{comment.user_id}}"
                    data-note-id="{{comment.note_id}}"
                    onclick="xnote.comment.openReplyDialog(this)">回复</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 danger" onclick="xnote.comment.deleteComment(this)" 
                        data-content="{{comment.content}}" 
                        data-id="{{comment.id}}" >删除</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>