{% trans_default_domain 'admin' %}

{% if typeChips is not empty %}
    {# The dots carry one meaning only — who the mail was addressed to. #}
    {% if chipAudiences|length > 1 %}
        <div class="mb-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-gray-500 dark:text-gray-400">
            {% for audience in chipAudiences %}
                <span class="inline-flex items-center gap-1.5">
                    <span class="size-2 rounded-full" style="background: {{ audience.color }}"></span>
                    {{ ('outbox.audience.' ~ audience.value)|trans }}
                </span>
            {% endfor %}
        </div>
    {% endif %}
    <div class="flex flex-wrap items-center gap-2">
        <span class="mr-1 text-xs font-bold uppercase tracking-wide text-gray-400 dark:text-gray-500">{{ 'outbox.type'|trans }}</span>
        {% for chip in typeChips %}
            {% set active = type == chip.messageClass %}
            <button type="button"
                    data-action="live#action"
                    data-live-action-param="selectType"
                    data-live-type-param="{{ chip.messageClass }}"
                    class="inline-flex items-center gap-2 rounded-full border py-1.5 pl-2.5 pr-3 text-xs font-semibold transition {{ active ? 'border-gray-900 bg-gray-900 text-white dark:border-gray-100 dark:bg-gray-100 dark:text-gray-900' : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800' }}">
                <span class="size-2 rounded-full" style="background: {{ this.typeColor(chip.messageClass) }}"></span>
                {{ this.typeLabel(chip.messageClass) }}
                <span class="{{ active ? 'text-white/60' : 'text-gray-400 dark:text-gray-500' }}">{{ chip.count }}</span>
            </button>
        {% endfor %}
    </div>
{% endif %}
