{% macro tag_group(group) %}
  {% if group %}
    {% if group.feature_image %}
      <img
        src="{{ group.feature_image }}"
        alt="{{ group.name }}"
        class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"
      >
    {% else %}
      <div
        class="h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
        style="{% if group.colour %}background-color: {{ group.colour }}; color: white;{% else %}background-color: #e7e5e4; color: #57534e;{% endif %}"
      >
        {{ group.name[:1] }}
      </div>
    {% endif %}

    <span class="inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200">
      {{ group.name }}
    </span>
  {% endif %}
{% endmacro %}
