{% props name: String, src: String = "", initials: String = "", size: String = "", shape: String = "" %}
{%- let initials = if initials.is_empty() { let words: Vec<&str> = name.split_whitespace().collect(); let first = words.first().and_then(|w| w.chars().next()); let last = if words.len() > 1 { words.last().and_then(|w| w.chars().next()) } else { None }; first.into_iter().chain(last).collect::<String>().to_uppercase() } else { initials } %}
<span class="ui-avatar"{% if !size.is_empty() %} data-size="{{ size }}"{% end %}{% if !shape.is_empty() %} data-shape="{{ shape }}"{% end %}>
{%- if !src.is_empty() %}
<img src="{{ src }}" alt="{{ name }}" loading="lazy" onerror="this.remove()">
<span class="ui-avatar-fallback" aria-hidden="true">{{ initials }}</span>
{%- else %}
<span class="ui-avatar-fallback">{{ initials }}</span>
{%- end %}
</span>