- const feature = $attrs['feature'];
mp-modal(
  attrs={
    'modal-type': 'popup',
    'closeable': true,
    'not-fullscreen': true,
    'open': $attrs['open']
  }
  on={
    change: $helpers.handleModalChange,
  }
)
  .mp-upsell-popup-content
    .mp-upsell-popup-icon
      case feature
        when 'custom-events'
          include ./icon-custom-events.svg
        when 'export-csv'
          include ./icon-csv.svg
        when 'bookmark-maximum'
          include ./icon-bookmarks.svg
        when 'date-range'
        when 'filter-levels'
        default
          include ./icon-report-generic.svg
    .mp-upsell-popup-text
      case feature
        when 'custom-events'
          | #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan to create more custom events.
        when 'date-range'
          | #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan to query a wider date range.
        when 'export-csv'
          | #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan to export a CSV report.
        when 'filter-levels'
          | More filters are not available. #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan for more.
        when 'bookmark-maximum'
          | #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan to save more bookmarks.
        default
          | #[a.upgrade-link(attrs={href: '/pricing/', target: '_blank'}) Upgrade] your plan to do more.