{% import 'apostrophe-ui:components/dropdowns.html' as dropdowns with context -%}

<div class="apos-ui">
  <div class="apos-admin-bar apos-active apos-text-meta" data-apos-admin-bar>
    <div class="apos-admin-bar-inner">
      <div class="apos-admin-bar-logo" data-apos-admin-bar-logo data-apos-actionable="data-apos-admin-bar">
        {% include 'logo.html' %}
      </div>
      {% for item in data.items %}
        <div class="apos-admin-bar-item">
          {% if item.menu %}
            <div class="apos-dropdown apos-dropdown--admin apos-dropdown--down" data-apos-dropdown="down" data-apos-actionable>
          {% endif %}
          <div class="apos-admin-bar-item-inner"
            {%- if not item.menu -%}
              data-apos-admin-bar-item="{{ item.name }}"
            {%- endif -%}
          >
          {%- if item.options.href -%}
            <a href="{{ apos.prefix }}{{ item.options.href }}">
          {%- endif -%}
            {{ __(item.label | d('')) }}
          {%- if item.options.href -%}
            </a>
          {%- endif -%}
          </div>
          {% if item.menu %}
            <ul class="apos-dropdown-items" data-apos-dropdown-items>
              {% for subItem in item.items %}
                <li class="apos-dropdown-item" data-apos-admin-bar-item="{{ subItem.name }}">
                  {%- if subItem.options.href -%}
                    <a href="{{ apos.prefix }}{{ subItem.options.href }}">
                  {%- endif -%}
                  {{ __(subItem.label | d('')) }}
                  {%- if subItem.options.href -%}
                    </a>
                  {%- endif -%}
                </li>
              {% endfor %}
            </ul>
          {% endif %}
          {% if item.menu %}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</div>