<div class="pixiedust" pixiedust="{{pd_controls|htmlAttribute}}">
  {% if not gateway %}
  <button class="btn btn-default btn-sm expandButton" data-toggle="collapse"
          data-target="#pixiedust-output-wrapper-{{this.getPrefix()}}" title="Expand/Collapse Pixiedust output">
    <i class="fa"></i>
  </button>
  {%if this.options.get("nostore_ispix")%}
  <button pd_app="pixiedust.apps.gateway.publish.PublishApp" pd_options="runInDialog=true;title=Publish PixieApp" class="btn btn-default btn-sm no_loading_msg" style="z-index:999;float:right;width: initial;background-color:transparent;
    border: 0 none;font-size: 15px;padding: 0; position: relative; right: 0; text-align: right;top: 0;" title="Publish PixieApp">
    <i class="fa fa-plug no_loading_msg"></i>
  </button>
  <button pd_refresh class="btn btn-default btn-sm no_loading_msg" style="z-index:999;float:right;width: initial;background-color:transparent;
    border: 0 none;font-size: 15px;padding: 0; position: relative; right: 0; text-align: right;top: 0;" title="Restart PixieApp">
    <i class="fa fa-home no_loading_msg"></i>
  </button>
  {%endif%}
  {%endif%}
  <div id="pixiedust-output-wrapper-{{this.getPrefix()}}" class="pixiedust-output-wrapper collapse in">
    {%if numMenu > 1 %}
      <div class="pixiedust-toolbar btn-group" role="group" style="margin-bottom:15px">  
      {%for key, menuInfoList in menuTree|iteritems%}
        {%if menuInfoList|length==1%}
          <a class="btn btn-small btn-default display-type-button" id="menu{{this.getPrefix(menuInfoList[0])}}" title="{{menuInfoList[0]['title']}}">
            <i class="fa {{menuInfoList[0]['icon']}}"></i>
          </a>
          {{this._getMenuHandlerScript(menuInfoList[0])}}
        {%elif menuInfoList|length>1%}
          <div class="btn-group btn-small display-type-button">
            {% set category = this.getCategory(key) %}
            <a class="btn btn-small dropdown-toggle btn-default" data-toggle="dropdown" title="{{category.title}}">
              {% if "icon-class" in category %}
              <i class="fa {{category['icon-class']}}"></i>
              {% elif "icon-path" in category %}
              <img src="{{category['icon-path']|base64dataUri}}" style="max-width:18px;display:inline-block">
              {% endif %}
              <i class="fa fa-chevron-down"></i>
            </a>
            <div class="dropdown-menu" role="menu" style="white-space:nowrap">
              <ul>
              {%for menuInfo in menuInfoList%}
                <li id="menu{{this.getPrefix(menuInfo)}}">
                  {% if "icon-class" in menuInfo or "icon" in menuInfo%}
                  <i class="fa {{menuInfo.get('icon-class', menuInfo.get('icon'))}}"></i>
                  {% elif "icon-path" in menuInfo %}
                  <img src="{{menuInfo['icon-path']|base64dataUri}}" style="max-width:18px;display:inline-block">
                  {% endif %}
                  <span>{{menuInfo['title']}}</span>
                  {{this._getMenuHandlerScript(menuInfo)}}
                </li>
              {%endfor%}
              </ul>
            </div>
          </div>
        {%endif%}
      {%endfor%}
        <a id="filterbutton{{prefix}}" href="#filter{{prefix}}" class="btn btn-small btn-default display-type-button" data-toggle="collapse" title="Filter">
          <i class="fa fa-filter" aria-hidden="true"></i>
        </a>
      </div>
      <div id="filter{{prefix}}" class="collapse no_loading_msg" style="margin-bottom:15px;padding:10px 15px;border: 1px solid #eaeaea;background-color: #fafafa;">
        <div pd_render_onload pd_app="pixiedust.display.chart.filter.FilterApp" class="no_loading_msg">
          <script>
            $(document).trigger('pd_event', {type:"pd_load", targetNode: $("#filter{{prefix}}")});
          </script>
        </div>
      </div>
    {%endif%}
    <div id="wrapperJS{{this.getPrefix()}}"></div>
    <div id="wrapperHTML{{this.getPrefix()}}" class="pixiedustWrapperHTML" pd_init
        pixiedust="{{pd_controls|htmlAttribute}}" style="min-height:100px"></div>
  </div>
</div>