{% import _self as self %}
{% import 'admin-bar/_plugin-widgets-macros' as pluginWidgets %}

{% set authors = widgetConfig['entryAuthors'] %}
{% set widgetLabel = displayWidgetLabels ? widgets[pluginHandle].name : '' %}

{% if authors|length > 1 %}
  <admin-bar-button class="admin-bar-widget admin-bar-widget--craft-authors">
    <div style="display: flex; flex-flow: row nowrap;">
      {% for author in authors %}
        <span {% if not loop.first %}style="margin-inline-start: -8px;"{% endif %}>
          {{ self.authorImage(author) }}
        </span>
      {% endfor %}
    </div>
    {{ pluginWidgets.widgetBadgeAndLabel(null, widgets[pluginHandle].name, displayWidgetLabels) }}
    <div slot="popover" style="display: flex;">
      {% for author in authors %}
        <admin-bar-text>
          {{ self.authorImage(author) }}
          {{ author.name }}
        </admin-bar-text>
      {% endfor %}
    </div>
  </admin-bar-button>
{% elseif authors|length %}
  <admin-bar-text>
    {{ self.authorImage(authors[0]) }}
    {{ pluginWidgets.widgetBadgeAndLabel(authors[0].name, 'widget-craft-authors-author'|t('admin-bar', language = userLanguage), displayWidgetLabels) }}
  </admin-bar-text>
{% endif %}

{% macro authorImage(author) %}
  {% if author.photo %}
    <img
        width="25px"
        height="25px"
        alt="{{ author.name }} {{ 'avatar' }}"
        src="{{ author.photo }}"
        style="display:block; max-width: 25px; width: 25px; height: auto; border-radius: 50%;"
    >
  {% else %}
    <div class="admin-bar-widget--craft-authors__avatar-text" style="display: flex; align-items: center; justify-content: center; background-color: color-mix(in oklch, var(--admin-bar-badge-color-bg), rgba(73, 73, 73, 0.8) 50%); box-sizing: border-box; width: 25px; height: 25px; border: 2px solid color-mix(in oklch, var(--admin-bar-badge-color-bg), transparent 30%); border-radius: 50%; font-size: 13px; color: color-mix(in oklch, var(--admin-bar-badge-color-text), transparent 30%);">{{ author.name|slice(0,1)|upper }}</div>
  {% endif %}
{% endmacro %}