{#
Avatar Component
================
A person's picture when they have one (Google sign-in brings it), otherwise
the first letter of their name or email address in a circle. Drawn here, with
no request to another site: an email sign-in has no picture, and an avatar
service elsewhere is blocked by the app's content security policy anyway.

Usage:
    {% from "components/avatar.html" import avatar %}
    {{ avatar(user) }}                    (md, 40px)
    {{ avatar(current_user, size="lg") }}

Sizes: sm (24px), md (40px), lg (56px), xl (96px).
#}

{% macro avatar(user, size="md", class="") %}
{% set sizes = {
    "sm": "w-6 h-6 text-xs",
    "md": "w-10 h-10 text-sm",
    "lg": "w-14 h-14 text-xl",
    "xl": "w-24 h-24 text-4xl",
} %}
{% set dims = sizes.get(size, sizes["md"]) %}
{% set name = (user.display_name if user.display_name is defined and user.display_name else "") or (user.email or "") %}
{% set picture = user.profile_image_url if user.profile_image_url is defined and user.profile_image_url else "" %}
{% if picture %}
<img src="{{ picture }}" alt="" class="{{ dims }} rounded-full object-cover shrink-0 {{ class }}" referrerpolicy="no-referrer">
{% else %}
{% set letters = name | select("in", "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789") | list %}
<span class="{{ dims }} rounded-full shrink-0 inline-flex items-center justify-center font-semibold select-none bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-100 {{ class }}"
      aria-hidden="true">{{ (letters | first | default("?")) | upper }}</span>
{% endif %}
{% endmacro %}