{% import 'apostrophe-ui:components/dropdowns.html' as dropdowns with context -%}
{%- macro listWidgets(widgets) -%}
  {%- for name, options in widgets -%}
    {%- if not data.widgetManagers[name] -%}
      {{ apos.log("Your area contains a widget of type " + name + " but there is no manager for that type. Maybe you forgot to configure the " + name + "-widgets module?") }}
    {%- else -%}
      <li class="apos-dropdown-item" data-add-item-type="{{ name }}">{{ __(data.widgetManagers[name].label) }}</li>
    {%- endif -%}
  {%- endfor -%}
{%- endmacro -%}
<div class="apos-ui">
  {{ dropdowns.base(
    {
      label: 'Add Content',
      items: data.options.widgets
    },
    'button',
    {
      direction: 'down',
      listMacro: listWidgets
    })
  }}
</div>

{% import 'apostrophe-ui:components/dropdowns.html' as dropdowns with context -%}
{%- macro listWidgets(widgets) -%}
  {%- for name, options in widgets -%}
    {%- if not data.widgetManagers[name] -%}
      {{ apos.log("Your area contains a widget of type " + name + " but there is no manager for that type. Maybe you forgot to configure the " + name + "-widgets module?") }}
    {%- else -%}
      <li class="apos-dropdown-item" data-add-item-type="{{ name }}">{{ __(data.widgetManagers[name].label) }}</li>
    {%- endif -%}
  {%- endfor -%}
{%- endmacro -%}
<div class="apos-ui">
  {{ dropdowns.base(
    {
      label: 'Add Content',
      items: data.options.widgets
    },
    'button',
    {
      direction: 'down',
      listMacro: listWidgets,
      buttonType: 'inContext'
    })
  }}
</div>

Add content button should glow
Add content button should glow
