{% 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: alert,
            type: 'li',
            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 %}
        {% endfor %}
      {% endblock %}
    {% endembed %}
  {% endif %}
{% else %}
  {% js %}
    Craft.cp.fetchAlerts().then(alerts => {
      Craft.cp.displayAlerts(alerts);
    });
  {% endjs %}
{% endif %}
