{% if titles %}
<div class="user-section">
    <div class="section-title" style="justify-content: center;">
        <div class="section-icon">
            <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
        </div>
        Chân dung thành viên · Portraits
    </div>
    <div class="masonry-grid">
        {% for title in titles %}
        <div class="user-card avoid-break" style="position: relative; overflow: hidden;">
            <div class="user-header">
                <div class="u-avatar">
                    {% if title.avatar_data %}
                    <img src="{{ title.avatar_data }}" alt="Ảnh đại diện" style="width: 100%; height: 100%; object-fit: cover;">
                    {% else %}
                    <svg class="doodle" style="font-size: 2rem;" viewBox="0 0 24 24">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                    {% endif %}
                </div>
                <div class="u-info">
                    <div class="u-name">{{ title.name }}</div>
                    <div class="badges">
                        <span class="badge title">{{ title.title }}</span>
                        <span class="badge mbti">{{ title.profile_display or title.mbti }}</span>
                    </div>
                </div>
            </div>
            <div class="u-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: 80%; 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 %}