{% macro avatar(url) %}
{% if url %}
<img src="{{ url }}" class="avatar" alt="avatar">
{% else %}
<div class="avatar avatar-placeholder"></div>
{% endif %}
{% endmacro %}

{% macro user_info(name, level, time, floor=None, sub_text_list=None) %}
<div class="user-info">
    <span class="username">{{ name }}</span>
    <span class="sub">Lv.{{ level }} · {{ time | format_date }}
        {% if floor %}· {{ floor }}楼{% endif %}
        {% if sub_text_list %}
        {% for text in sub_text_list %}
        · {{ text }}
        {% endfor %}
        {% endif %}
    </span>
</div>
{% endmacro %}

{% macro images(image_list, remain_count=0) %}
{% if image_list and image_list | length > 0 %}
<div class="images">
    {% for img in image_list %}
    <div class="image-item">
        {% if img %}
        <img src="{{ img }}" alt="Image">
        {% else %}
        <div class="image-placeholder">图片加载失败</div>
        {% endif %}
        {% if loop.last and remain_count > 0 %}
        <div class="more-count">+{{ remain_count }}</div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}
{% endmacro %}

{% macro forum_bar(forum_name, forum_icon_url) %}
<div class="forum-bar">
    {% if forum_icon_url %}
    <img src="{{ forum_icon_url }}" class="forum-icon" alt="forum icon">
    {% else %}
    <div class="forum-icon forum-icon-placeholder"></div>
    {% endif %}
    <span class="forum-name">{{ forum_name }}吧</span>
</div>
{% endmacro %}

{% macro content_item(item, is_thread=False, forum_name=None, forum_icon_url=None) %}
<div class="item {% if is_thread %}thread-item{% else %}post-item{% endif %}">
    {% if forum_name %}
    {{ forum_bar(forum_name, forum_icon_url) }}
    {% endif %}
    <div class="header">
        {{ avatar(item.portrait_url) }}
        {{ user_info(item.nick_name, item.level, item.create_time, item.floor, item.sub_text_list) }}
    </div>

    {% if item.title %}
    <div class="title">{{ item.title }}</div>
    {% endif %}

    <div class="text">{{ item.text }}</div>

    {{ images(item.image_url_list, item.remain_image_count) }}

    {% if item.sub_html_list %}
    {% for html in item.sub_html_list %}
    <div class="sub-html-item">
        {{ html | safe }}
    </div>
    {% endfor %}
    {% endif %}

    {% if item.comments %}
    <div class="comments">
        {% for comment in item.comments %}
        <div class="comment-item">
            {% if comment.portrait_url %}
            <img src="{{ comment.portrait_url }}" class="comment-avatar" alt="avatar">
            {% else %}
            <div class="comment-avatar-placeholder"></div>
            {% endif %}
            <div class="comment-content">
                <div class="comment-header">
                    <span class="comment-user">{{ comment.nick_name }}</span>
                    <span class="sub">Lv.{{ comment.level }} · {{ comment.create_time | format_date }}</span>
                </div>
                <div class="comment-text">{{ comment.text }}</div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}