{% if titles %}
<div class="section">
    <h2 class="section-title">群友称号</h2>
    <div class="users-grid">
        {% for title in titles %}
        <div class="user-title" style="position: relative; overflow: hidden;">
            <div class="user-info">
                {% if title.avatar_data %}
                <img src="{{ title.avatar_data }}" class="user-avatar" alt="头像">
                {% else %}
                <div class="user-avatar-placeholder">👤</div>
                {% endif %}
                <div class="user-details">
                    <div class="user-name">{{ title.name }}</div>
                    <div class="user-badges">
                        <div class="user-title-badge">{{ title.title }}</div>
                        <div class="user-mbti">{{ title.profile_display or title.mbti }}</div>
                    </div>
                </div>
            </div>
            <div class="user-reason">{{ title.reason }}</div>
            {% if title.profile_image %}
            <img src="{{ title.profile_image }}" alt="" style="position: absolute; right: 8px; bottom: 8px; width: 38%; max-height: 82%; object-fit: {{ title.profile_image_size_mode or 'contain' }}; opacity: {{ title.profile_image_opacity or 0.12 }}; pointer-events: none; z-index: 1;">
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}