{% macro onSettingsPreview(name) %}
  <admin-bar-text multi-line style="font-style: italic;">{{ 'The content for {name} cannot be shown on the Admin Bar Settings page. It will be displayed correctly on other pages.'|t('admin-bar', {name}) }}</admin-bar-text>
{% endmacro %}

{% macro seoMeta(meta) %}
  <div style="--admin-bar-text-padding: 0; width: min(400px, 90vw); padding: clamp(4px, 1vw, 13px); {% if meta.extrasList|length %}border-block-end: 1px solid color-mix(in srgb, var(--admin-bar-button-color-bg-hover), transparent 80%);{% endif %}">
    {% if meta.imageUrl ?? false %}
      <img
          src="{{ meta.imageUrl }}"
          {% if meta.imageAlt ?? false %}alt="{{ meta.imageAlt }}"{% endif %}
          style="display: block; max-width: 100%; height: auto; border-radius: var(--admin-bar-border-radius);"
      >
    {% endif %}

    {% if meta.title ?? false %}
      <admin-bar-text multi-line><strong style="text-wrap: pretty;">{{ meta.title }}</strong></admin-bar-text>
    {% endif %}

    {% if meta.description ?? false %}
      <admin-bar-text multi-line><span style="text-wrap: pretty;">{{ meta.description }}</span></admin-bar-text>
    {% endif %}

    {% if meta.canonical ?? false %}
      <admin-bar-text multi-line><em><a href="{{ meta.canonical }}">{{ meta.canonical }}</a></em></admin-bar-text>
    {% endif %}
  </div>

  {% if meta.extrasList|length %}
    <admin-bar-text dl-content="{{ meta.extrasList|json_encode }}"></admin-bar-text>
  {% endif %}
{% endmacro %}

{% macro widgetBadgeAndLabel(badge, text, visible) %}
  {% if badge != null %}
    <admin-bar-text
        class="admin-bar-widget-badge"
        badge-content="{{ badge }}"
        style="--admin-bar-text-padding: 0;"
    ></admin-bar-text>
  {% endif %}
  <admin-bar-text class="admin-bar-widget-label{{ not visible ? ' admin-bar-widget-label-hidden' : '' }}" text-content="{{ text }}"></admin-bar-text>
{% endmacro %}