{# ZF Dropdown pane on small devices - becomes a regular horizonatal menu by the given breakpoint defined in data-anchor-menu-horizontal-breakpoint %}
{# Menu items will be attached dynamicly with javascript #}

{% set dropdown_id = 'dropdown-pane-' ~ random() %}
{%
  set list_classes = [
    'menu',
    'menu--anchor-menu',
    'menu--famb-anchor-menu',
    menu_orientation ? menu_orientation|clean_class,
    'hidden'
  ]
%}

<button class="button dropdown small expanded button--anchor-menu-dropdown-toggle hidden hide-for-{{ menu_horizontal_breakpoint }}" type="button" data-toggle="dropdown-pane-{{ dropdown_id }}"></button>
<div id="dropdown-pane-{{ dropdown_id }}" class="dropdown-pane" data-close-on-click="true" data-position="bottom" data-alignment="center" data-dropdown data-auto-focus="true">
  <ul {{ list_attributes
          .addClass(list_classes)
          .addClass(list_classes_additional)
          .setAttribute('data-famb-anchor-menu','true')
          .setAttribute('data-anchor-menu-horizontal-breakpoint', menu_horizontal_breakpoint)
          .setAttribute('data-anchor-menu-orientation', menu_orientation)
      }}>
  </ul>
</div>