{{assert 'dropdown-menu must contain block components' hasBlock}}

{{vinli-button id=dropdownId
  action=(action open)
  default=text
  theme=theme
  class=(if isOpen 'btn--active dropdown-menu__btn' 'dropdown-menu__btn')
  icon=(if icon icon 'arrow-down')
  iconPosition=(if (and text (not icon)) 'after' iconPosition)
  hook='dropdown-menu-button'
}}

{{#if isOpen}}
  <div>
    {{#ember-tether
      target=(concat '#' dropdownId)
      targetAttachment=targetAttachment
      attachment=attachment
      constraints=constraints
    }}
      <div class="dropdown-menu__content shadow--3 {{dropdownId}} dropdown-menu__content--{{theme}}" style={{css-esc (concat 'width: ' contentWidth 'px')}} data-test={{hook 'dropdown-menu-content'}}>
        {{yield (hash
          header=(component 'dropdown-menu-header' dropdownMenu=this)
          list=(component 'dropdown-menu-list' dropdownMenu=this)
          item=(component 'dropdown-menu-item' dropdownMenu=this)
          footer=(component 'dropdown-menu-footer' dropdownMenu=this)
          )}}
      </div>
    {{/ember-tether}}
  </div>
{{/if}}