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

<admin-bar-button class="admin-bar-widget" style="--admin-bar-icon-width: 1.5rem">
  {{ svg('@wbrowar/guide/icon-mask.svg')|attr({ class: 'icon', slot: 'before-label' }) }}
  {{ pluginWidgets.widgetBadgeAndLabel(null, widgets[pluginHandle].name, displayWidgetLabels) }}
  <div slot="popover">
    {% if widgetConfig['guides']|length %}
      {% for guide in widgetConfig['guides'] %}
        <admin-bar-button button-href="{{ cpUrl('guide/page/' ~ guide.slug) }}">
          <span style="--admin-bar-icon-width: 1rem">{{ svg('@wbrowar/guide/icon-mask.svg')|attr({ class: 'icon' }) }}</span>
          {{ guide.title }}
        </admin-bar-button>
      {% endfor %}
    {% endif %}
    <admin-bar-button
        button-href="{{ cpUrl('guide') }}"
        {% if widgetConfig['guides']|length %}style="border-block-start: 1px solid color-mix(in srgb, var(--admin-bar-button-color-bg-hover), transparent 80%);"{% endif %}
    >
      <span style="--admin-bar-icon-width: 1.3rem">{{ svg('@wbrowar/guide/icon-mask.svg')|attr({ class: 'icon' }) }}</span>
      {{ 'label-guide'|t('admin-bar', language = userLanguage) }}
    </admin-bar-button>
  </div>
</admin-bar-button>