{% if titles %}
{% for title in titles %}
<div class="title-item">
    <div class="title-avatar-wrap">
        {% if title.avatar_data %}
        <img src="{{ title.avatar_data }}" alt="{{ title.name }}">
        {% else %}
        <div
            style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; opacity:0.3;">
            DATA_ERR</div>
        {% endif %}
    </div>
    <div class="title-info">
        <h4>{{ title.name }}</h4>
        <div class="title-badge">
            <span>{{ title.mbti }}</span>
            <span style="color:var(--c-dec-3);">//</span>
            <span>{{ title.title }}</span>
        </div>
        <div class="title-reason">{{ title.reason }}</div>
    </div>
</div>
{% endfor %}
{% endif %}