{{#let
  (if (or @href @onClick) (unique-id))
  (if @selectable (unique-id))
  (optional @onClick) as |titleId selectableId onClick|
}}
  <div
    class={{class-names
      "euiCard--shadow"
      (if (eq @layout "horizontal") "euiCard--horizontal")
      (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
      (if @isDisabled "euiCard-isDisabled")
      (if hasBlock "euiCard--hasChildren")
      (if @icon "euiCard--hasIcon")
      (if @betaBadgeLabel "euiCard--hasBetaBadge")
      (if (or onClick @href (and @selectable (not @selectable.isDisabled))) "euiCard--isClickable")
      (if @selectable "euiCard--isSelectable")
      (if (and @selectable @selectable.isSelected) "euiCard-isSelected")
      componentName="EuiCard"
      paddingSize=(arg-or-default @paddingSize "m")
      textAlign=(arg-or-default @textAlign "center")
      color=(if @selectable.isSelected (arg-or-default @selectable.color "success"))
    }}
    ...attributes
    {{on-event-simulate-event
      "click"
      target=(or (if titleId (concat "#" titleId)) (if selectableId (concat "#" selectableId)))
      event=(create-event (hash eventType="Event" trigger="click"))
    }}
  >
    {{#if (or @image @icon)}}
      <div class="euiCard__top">
        {{#if (and @image (not (eq @layout "horizontal")))}}
          <div class="euiCard__image">
            <img src={{@image}} alt="card-top" />
          </div>
        {{/if}}
        {{#if @icon}}
          <EuiIcon class="euiCard__icon" @type={{@icon}} @size={{@iconSize}} />
        {{/if}}
      </div>
    {{/if}}
    <div class="euiCard__content">
      <EuiTitle
        class="euiCard__title"
        @size={{arg-or-default @titleSize "s"}}
        @tag={{arg-or-default @titleElement "span"}}
      >
        {{#if (and (not @isDisabled) @href)}}
          <a
            class="euiCard__titleAnchor"
            target={{@target}}
            disabled={{@isDisabled}}
            href={{@href}}
            id={{titleId}}
          >
            {{@title}}
          </a>
        {{else if (or @isDisabled onClick)}}
          <button
            type="button"
            class="euiCard__titleButton"
            disabled={{@isDisabled}}
            id={{titleId}}
            {{on "click" onClick}}
          >
            {{@title}}
          </button>
        {{else}}
          {{@title}}
        {{/if}}
      </EuiTitle>
      <EuiText @grow={{true}} @size="s" class="euiCard__description">
        {{@description}}
      </EuiText>
      {{yield to="body"}}
    </div>
    {{#if @betaBadgeLabel}}
      <span class="euiCard__betaBadgeWrapper">
        <EuiBetaBadge
          class="euiCard__betaBadge"
          @label={{@betaBadgeLabel}}
          @title={{@betaBadgeLabel}}
        />
      </span>
    {{/if}}
    {{#if (and (not (eq @layout "horizontal")) (has-block "footer"))}}
      <div class="euiCard__footer">
        {{yield to="footer"}}
      </div>
    {{/if}}
    {{#if @selectable}}
      <EuiCard::EuiCardSelect
        @type={{@selectable.type}}
        @buttonId={{selectableId}}
        @isSelected={{@selectable.isSelected}}
        @isDisabled={{@selectable.isDisabled}}
        @color={{@selectable.color}}
        @iconType={{@selectable.iconType}}
        @isLoading={{@selectable.isLoading}}
        @href={{@selectable.href}}
        @iconSide={{@selectable.iconSide}}
        @flush={{@selectable.flush}}
        {{on "click" (optional @selectable.onClick)}}
      />
    {{/if}}
  </div>
{{/let}}