{{#let
  (unique-id)
  (class-names position=this.anchorPosition display=this.display componentName="EuiPopover")
  (class-names
    "euiPopover__panel"
    (concat "euiPopover__panel--" this.arrowPosition)
    (if this.isOpening "euiPopover__panel-isOpen")
    (if (or (not this.hasArrow) @attachToAnchor) "euiPopover__panel-noArrow")
    (if @attachToAnchor "euiPopover__panel-isAttached")
  ) as |descriptionId classes panelClasses|
}}
  {{#if this.ownFocus}}
    <div
      class="{{if this.isOpening "euiPopover-isOpen"}} {{classes}}"
      ...attributes
      {{did-insert this.didInsertPopover}}
      {{did-insert (optional @popoverRef)}}
      {{did-update this.didUpdateIsOpen @isOpen}}
      {{did-update this.didUpdateRepositionOnScroll @repositionOnScroll}}
    >
      <div class="euiPopover__anchor {{@anchorClassName}}" {{did-insert this.registerButton}}>
        {{yield to="button"}}
      </div>
      {{#if (and (not this.suppressingPopover) (or this.isCurrentlyOpen this.isClosing))}}
        <EuiPortal @insert={{@insert}}>
          <EuiPanel
            class={{panelClasses}}
            tabindex={{if this.ownFocus "0"}}
            aria-live={{if this.ownFocus "off" "assertive"}}
            role="dialog"
            aria-label={{@ariaLabel}}
            aria-labelledby={{@ariaLabelledBy}}
            aria-modal="true"
            aria-describedby={{if this.ownFocus descriptionId}}
            @hasShadow={{false}}
            @paddingSize={{this.panelPaddingSize}}
            {{simple-style this._popoverStyles}}
            {{did-insert this.registerPanel}}
            {{outside-click-detector onOutsideClick=this.onClickOutside}}
            {{on-key "Escape" this.onEscapeKey}}
            {{focus-trap
              isActive=(not (or (not this.ownFocus) (not this.isOpenStable) this.isClosing))
              focusTrapOptions=(hash
                shouldSelfFocus=true
                returnFocusOnDeactivate=this.isOpenStable
                initialFocus=(or @initialFocus this.panel)
                onDeactivate=(optional @onTrapDeactivation)
                preventScroll=true
                clickOutsideDeactivates=true
              )
            }}
          >
            <div
              class="euiPopover__panelArrow euiPopover__panelArrow--{{this.arrowPosition}}"
              style={{this._arrowStyles}}
            >
              {{yield to="arrowChildren"}}
            </div>
            {{#if this.ownFocus}}
              <p id={{descriptionId}} {{screen-reader-only}}>
                "You are in a dialog. To close this dialog, hit escape."
              </p>
            {{/if}}
            <div
              {{mutation-observer
                onMutation=this.onMutation
                observerOptions=(hash
                  attributes=true childList=true characterData=true subtree=true
                )
              }}
            >
              {{yield to="content"}}
            </div>
          </EuiPanel>
        </EuiPortal>
      {{/if}}
    </div>
  {{else}}
    <div
      class={{classes}}
      ...attributes
      tabindex="-1"
      {{on-key "_all" this.onKeyDown}}
      {{did-insert this.didInsertPopover}}
      {{did-update this.didUpdateIsOpen @isOpen}}
      {{did-update this.didUpdateRepositionOnScroll @repositionOnScroll}}
    >
      <div class="euiPopover__anchor {{@anchorClassName}}" {{did-insert this.registerButton}}>
        {{yield to="button"}}
      </div>
      {{#if (and (not this.suppressingPopover) (or this.isOpen this.isClosing))}}
        <EuiPortal @insert={{@insert}}>
          <EuiPanel
            class={{panelClasses}}
            tabindex={{if this.ownFocus "0"}}
            aria-live={{if this.ownFocus "off" "assertive"}}
            role="dialog"
            aria-label={{@ariaLabel}}
            aria-labelledby={{@ariaLabelledBy}}
            aria-modal="true"
            aria-describedby={{if this.ownFocus descriptionId}}
            @hasShadow={{false}}
            @paddingSize={{this.panelPaddingSize}}
            {{simple-style this._popoverStyles}}
            {{did-insert this.registerPanel}}
            {{outside-click-detector onOutsideClick=this.onClickOutside}}
            {{on-key "Escape" this.onEscapeKey}}
          >
            <div
              class="euiPopover__panelArrow euiPopover__panelArrow--{{this.arrowPosition}}"
              style={{this._arrowStyles}}
            >
              {{yield to="arrowChildren"}}
            </div>
            {{#if this.ownFocus}}
              <p id={{descriptionId}} {{screen-reader-only}}>
                "You are in a dialog. To close this dialog, hit escape."
              </p>
            {{/if}}
            <div
              {{mutation-observer
                onMutation=this.onMutation
                observerOptions=(hash
                  attributes=true childList=true characterData=true subtree=true
                )
              }}
            >
              {{yield to="content"}}
            </div>
          </EuiPanel>
        </EuiPortal>
      {{/if}}
    </div>
  {{/if}}
{{/let}}