{# @description A compact row showing a contribution's contributor with their avatar and roles. #}
{# @prop contribution:text | description:"The contribution whose contributor and roles are shown." #}
<c-vars contribution />
<div class="d-flex align-items-center gap-3">
  <c-mvp.avatar src="{{ contributor.get_profile_image }}"
            size="md" />
  <div class="overflow-hidden">
    <div class="fw-semibold text-truncate">{{ contribution.contributor }}</div>
    <div class="text-secondary small text-truncate">
      {% for role in contribution.roles.all %}
        <span class="me-1">{{ role.display_label }}
          {% if not forloop.last %}|{% endif %}
        </span>
      {% endfor %}
    </div>
  </div>
</div>