mixin alert-error-message(errorMessage)
  .text #{errorMessage} If this issue persists please contact #[a(attrs={href: 'mailto:support@mixpanel.com'}) support@mixpanel.com].

- const numAffectedMessages = (affectedMessageIds || []).length
- const messagePlural = $helpers.pluralize('message', numAffectedMessages)
- const pausedMessagesText = `${numAffectedMessages} ${messagePlural} using this event will be paused`
mp-modal.custom-event-modal(
  attrs={
    open,
  }
  hook={
    postpatch: $helpers.styleCustomEventModal,
  }
  on={
    change: $helpers.handleModalChange,
  }
)
  .custom-event-modal-content(
    class={[$helpers.ELEMENTS_BY_CSS_CLASS.CUSTOM_EVENTS_MODAL_CONTENT]: true}
  )
    .mp-modal-header-container
      .mp-modal-header
        svg-icon(attrs={icon: `custom-events`})
        .mp-modal-title= $helpers.isNewCustomEvent() ? `New custom event` : `Edit custom event - ${stagedCustomEvent.name}`
    .custom-event-name-subheader
      .custom-event-name-wrapper
        mp-clickable-input(
          attrs={
            maxlength: $helpers.MAX_NAME_LENGTH,
            placeholder: `Untitled custom event`,
            size: `large`,
          }
          on={
            save: $helpers.updateCustomEventName,
            click: $helpers.clearNameErrorTooltip,
          }
          props={
            value: stagedCustomEvent.name,
          }
        )
        if error.invalidName || error.duplicateName
          - const errorMessage = error.invalidName ? `Please name your custom event` : `A custom event with that name already exists`
          mp-tooltip(
            attrs={
              'always-show': true,
              'max-width': `200px`,
              placement: `bottom`,
              type: `error`,
            }
          )
            span= errorMessage

    .mp-modal-content
      .custom-event-match-text Match my custom event when any of the following events happen:
      .custom-event-builder
        = $component.child(`mp-custom-event-builder`)
    .footer
      .delete-custom-event-button
        if stagedCustomEvent.id
          mp-button.mp-button-secondary.delete-custom-event-button(
            attrs={
              size: `small`,
            }
            on={click: $helpers.clickDeleteCustomEvent}
          )
            svg-icon(attrs={icon: `trashcan`})
          mp-tooltip Delete custom event
      .messages-wrapper
        if numAffectedMessages > 0
          .notifications-pause-warning
            svg-icon(attrs={icon: `info-outline`})
            span= `${numAffectedMessages} ${messagePlural} using this event will be paused`
      .modal-actions
        mp-button.mp-button-secondary(
          attrs={size: `small`}
          on={click: $helpers.cancelChanges}
        ) Cancel
        mp-button.mp-button-primary(
          attrs={
            disabled: !stagedCustomEvent.isValid(),
            size: `small`,
          }
          on={click: $helpers.clickSave}
        )= numAffectedMessages > 0 ? `Save custom event & pause ${messagePlural}` : `Save custom event`

  custom-event-builder-dropdown(
    style=$helpers.getBuilderPlacement()
    attrs={
      open: $helpers.isBuilderOpen(),
      'prevent-close-selectors': JSON.stringify([`.event-clickable`]),
      panes: JSON.stringify($helpers.getPaneAttributes()),
    }
    on={
      close: $helpers.closeBuilder,
    }
  )
    each pane, paneIndex in builder.panes
        = $component.child(pane.componentName, {attrs: {'pane-index': paneIndex}})

  if $helpers.isPropertyFilterMenuOpen()
    mp-property-filter-menu(
      style=$helpers.getBuilderPlacement()
      attrs=$helpers.filterAttributes({
        'display-context': $helpers.PropertyFilterDisplayContext.CustomEvent,
        'event-name': $helpers.getEventName(),
        'is-blocked-people': isBlockedPeople,
        'open': true,
        'prevent-close-selectors': JSON.stringify([`.property-filter-clickable`]),
        'project-has-people': projectHasPeople,
        'project-id': projectId,
        'property-filter': stagedPropertyFilter ? JSON.stringify(stagedPropertyFilter) : null,
        'property-search-filter': builder.searchFilter,
      })
      on={
        changeDropMenu: $helpers.changePropertyFilterDropMenu,
        changePropertyFilter: $helpers.changePropertyFilter,
        commitPropertyFilter: $helpers.commitPropertyFilter,
      }
      props=$helpers.pick(builder, [`keydownProxyEl`])
    )

  //- This is a somewhat gruesome cobbled-together version of mp-confirm-delete to avoid
  //- the modal-in-a-modal problem. Not a pattern to be repeated.
  mp-modal.delete-custom-event-modal(
    attrs={
      open: showDeleteModal,
    }
    hook={
      postpatch: $helpers.styleDeleteCustomEventModal,
    }
  )
    .mp-confirm-delete-container
      .mp-confirm-delete-body
        .mp-confirm-delete-icon
          svg-icon(attrs={icon: `alert`})
        .mp-confirm-delete-copy
          - const confirmationText = `The event will be removed from event selection dropdowns${numAffectedMessages ? ', ' + pausedMessagesText + ', ' : ' '} and cohorts and bookmarks using this custom event may be affected.`
          div
            .mp-confirm-delete-title Delete custom event
            .mp-confirm-delete-description= confirmationText

      .mp-confirm-delete-buttons
        mp-button.mp-button-secondary(on={click: $helpers.cancelDeleteCustomEvent}) Cancel
        mp-button.mp-button-red(on={click: $helpers.confirmDeleteCustomEvent}) Delete custom event

  mp-alert(
    attrs={id: `alert`, closeable: true, open: error['saveCustomEvent']}
    on={change: $helpers.handleErrorModalChange}
  )
    +alert-error-message(`Your custom event could not be saved.`)
  mp-alert(
    attrs={id: `alert`, closeable: true, open: error['deleteCustomEvent']}
    on={change: $helpers.handleErrorModalChange}
  )
    +alert-error-message(`Your custom event could not be deleted.`)