{% if craft.cp.areAlertsCached() %}
  {% set alerts = craft.cp.getAlerts() %}
  {% if alerts %}
    {% embed '_layouts/components/tag.twig' with {
      alerts: alerts,
      type: 'ul',
      attributes: {
        id: 'alerts',
      },
      style: {
        'display': 'block',
        'position': 'relative',
        'background-color': 'var(--red-050)',
        'border-left': '6px solid var(--error-color)',
        'color': 'var(--error-color)',
      },
    } only %}
      {% block content %}
        {% for alert in alerts %}
          {% embed '_layouts/components/tag.twig' with {
            alert,
            type: 'li',
            style: {
              'display': 'flex',
              'min-height': 'var(--header-height)'
            },
          } only %}
            {% block content %}
              {% embed '_layouts/components/tag.twig' with {
                alert,
                type: 'div',
                style: {
                  'display': 'block',
                },
              } only %}
                {% block content %}
                  {% if alert is string or (alert.showIcon ?? true) %}
                    {% include '_layouts/components/tag.twig' with {
                      type: 'span',
                      attributes: {
                        'aria-label': 'Error'|t('app'),
                        'data-icon': 'alert',
                      },
                    } only %}
                  {% endif %}
                  {{ (alert is array ? alert.content : alert)|raw }}
                {% endblock %}
              {% endembed %}
            {% endblock %}
          {% endembed %}
        {% endfor %}
      {% endblock %}
    {% endembed %}
  {% endif %}
{% else %}
  {% js %}
    Craft.cp.fetchAlerts().then(alerts => {
      Craft.cp.displayAlerts(alerts);
    });
  {% endjs %}
{% endif %}