<%# locals: (name: nil, color: "#000") %>

<% letter = name&.first || "?" %>

<% background_color = "color-mix(in srgb, #{color} 5%, white)" %>
<% border_color = "color-mix(in srgb, #{color} 10%, white)" %>
<span data-color-avatar-target="avatar"
      class="w-8 h-8 flex items-center justify-center rounded-full"
      style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>">
  <%= letter.upcase %>
</span>
