{% set icon_check_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'check-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_face_happy %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'face-happy',
    size: 'medium',
  } only %}
{% endset %}
{% set header_switch_button %}
  {% include '@bolt-components-switch-button/switch-button.twig' with {
    label: 'Only show unread notifications',
    attributes: {
      class: 'js-target-the-switch-button-container'
    },
  } only %}
{% endset %}
{% set header_actions %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_pega_setting,
    label: 'Notification settings',
    attributes: {
      href: '#!',
    },
  } only %}
{% endset %}
{% set content %}
  <div class="u-bolt-padding-top-large u-bolt-padding-right-medium u-bolt-padding-bottom-large u-bolt-padding-left-medium u-bolt-text-align-center">
    <span class="u-bolt-margin-right-small">{{ icon_face_happy }}</span>You are all caught up!
  </div>
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'View all notifications',
    reversed_underline: true,
    expand_click_target: true,
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}