<div
  class={{class-names
    (if this.isOpen "euiAccordion-isOpen")
    componentName="EuiAccordion"
    paddingSize=this.paddingSize
  }}
  ...attributes
>
  <div class="euiAccordion__triggerWrapper">
    <button
      id={{this.buttonId}}
      aria-controls={{@id}}
      aria-expanded={{this.isOpen}}
      class={{this.buttonClasses}}
      type="button"
      {{on "click" this.onToggle}}
    >
      {{#if this.hasArrowDisplay}}
        <span
          class={{concat
            "euiAccordion__iconWrapper "
            (if this.hasIconButton "euiAccordion__iconButton ")
          }}
        >
          <EuiIcon
            class={{class-names
              "euiAccordion__icon"
              (if this.isOpen "euiAccordion__icon-isOpen")
            }}
            @type="arrowRight"
            @size="m"
          />
        </span>
      {{/if}}
      <span
        class={{concat
          "euiIEFlexWrapFix "
          @buttonContentClassName
        }}
      >
        {{yield to="buttonContent"}}
      </span>
    </button>

    {{#if (and @extraAction (not this.isLoading))}}
      <div class="euiAccordion__optionalAction">{{@extraAction}}</div>
    {{else if this.isLoading}}
      <div class="euiAccordion__optionalAction">
        <EuiLoadingSpinner />
      </div>
    {{/if}}

    {{#if this.hasIconButton}}
      <button
        aria-controls={{@id}}
        aria-expanded={{this.isOpen}}
        aria-labelledby={{this.buttonId}}
        tabIndex={{-1}}
        class={{concat
          "euiAccordion__iconWrapper "
          (if this.hasIconButton "euiAccordion__iconButton ")
        }}
        {{on "click" this.onToggle}}
        type="button"
      >
        <EuiIcon
          class={{class-names
            "euiAccordion__icon"
            (if this.isOpen "euiAccordion__icon-isOpen")
          }}
          @type="arrowRight"
          @size="m"
        />
      </button>
    {{/if}}
  </div>

  <div
    class="euiAccordion__childWrapper"
    id={{@id}}
  >
    <div
      class={{class-names
        (if this.isLoading " euiAccordion__children-isLoading")
        paddingSize=this.paddingSize
        componentName="EuiAccordion"
      }}
    >
      {{#if (and this.isLoading this.isLoadingMessage)}}
        <EuiLoadingSpinner class="euiAccordion__spinner" />
        <span>
          {{#if this.hasLoadingMessage}}
            {{this.isLoadingMessage}}
          {{else}}
            {{!-- <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> --}}
            Loading...
          {{/if}}
        </span>
      {{else}}
        {{yield to="content"}}
      {{/if}}
    </div>
  </div>
</div>
