.mp-sh-menu
  - const placement = $attrs[`placement`];
  - const caretOffset = $component.getCaretOffset(placement);
  - const dropdownWidth = $component.dropdownWidth;
  - const open = $controller.isOpen()
  mp-drop-menu(
    attrs={
      open,
      'with-caret': $controller.getWithCaret(),
      'caret-pos-left': $controller.getCaretPosLeft(),
    },
    style={
      position: `absolute`,
      left: (placement === `left` || placement === `center`) ? `-${caretOffset}px` : `auto`,
      right: placement === `right` ? `-${caretOffset}px` : `auto`,
      width: open ? `${dropdownWidth}px` : ``,
    }
    on={
      change: $helpers.handleDropMenuChange,
    }
  )
    .mp-sh-menu-caret-container(
      class={
        'mp-sh-placement-left': placement === `left`,
        'mp-sh-placement-right': placement === `right`,
        'mp-sh-placement-center': placement === `center`,
      }
      style={
        width: `${dropdownWidth}px`,
      }
    )
      .mp-sh-menu-container
        .mp-sh-menu-header
          .mp-sh-menu-title
            if $component.displayContext !== `GLOBAL`
              | Related insights
            else
              | Notifications
        if $helpers.shouldShowLoadingState()
          .mp-sh-initial-loading
            mp-spinner
        else if $helpers.hasAlerts()
          .mp-sh-alerts-container(
            on={
              scroll: $helpers.handleScroll,
              wheel: $helpers.handleMousewheel,
            }
            hook={
              insert: $helpers.fetchAlertsIfNeeded,
              postpatch: $helpers.fetchAlertsIfNeeded,
            }
          )
            for alert, index in $controller.getAlerts()
              if alert.isDeleted
                .mp-sh-deleted-alert.mp-sh-list-item(
                  hook={insert: vnode => $helpers.insertedDeletedAlert(vnode.elm, alert)}
                  style={height: `${alert.placeholderHeight}px`}
                )
              else
                mp-smart-hub-notification.mp-sh-list-item(
                  attrs={
                    'project-id': $attrs[`project-id`],
                    'utc-offset': $attrs[`utc-offset`],
                    'display-context': $component.displayContext,
                    'alert': JSON.stringify(alert),
                    'last-item': (index === $controller.getAlerts().length - 1) || undefined,
                    'visible': open,
                  }
                  style={
                    width: `${dropdownWidth}px`,
                  }
                  on={
                    clickedLink: $helpers.handleClickedLink,
                    changedAlert: $helpers.handleChangedAlert,
                  }
                )
            if $helpers.isLoading()
              .mp-sh-pagination-loading.mp-sh-list-item
                mp-spinner
            .mp-sh-menu-footer
        else
          .mp-sh-empty-state
            img.mp-sh-empty-state-image(
              attrs={
                // By un-setting/re-setting the src, the gif will replay from the beginning when the dropdown
                // is re-opened.
                src: open ? `/site_media/images/smart_hub/empty_state.gif` : ``,
              }
            )
            .mp-sh-empty-state-text
              .mp-sh-empty-state-text-primary No current notifications
              .mp-sh-empty-state-text-secondary
                | Mixpanel automatically finds interesting trends and anomalies in your data. Add reports to your dashboard to start receiving notifications.
  if $controller.getTutorialAllowed()
    mp-tutorial-tooltip(
      attrs={
        'arrow-align': 'right',
        hide: !$helpers.shouldShowTutorial(),
        'hide-footer': false,
        'next-button': true,
        placement: 'bottom',
      }
      on={close: $helpers.closeTooltip}
    )
      .mp-sh-tutorial-title Introducing Anomaly Explanations
      .mp-sh-tutorial-content Spend less time investigating the source of each anomaly. Now we've highlighted anomalies where our machine learning algorithms have detected contributing factors.