<div class="submenu-controls">
  <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.current.pulldowns | filter:{ enable: true }">
    <div class="submenu-panel-title">
      <span class="small"><strong>{{pulldown.type}}:</strong></span>
    </div>
    <div class="submenu-panel-wrapper">
      <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

<div class="clearfix"></div>
<div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
  <div>
    <div class="grafana-container container">
      <!-- Rows -->
      <div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
        <div class="row-control">
          <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
            <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
              <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
                <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
              </span>
              <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-left pointer" ></i>
              </span>
              <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
            </div>

            <div style="text-align:center" class="row-open" ng-show="!row.collapse">
              <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
                <i bs-tooltip="'Collapse row'" data-placement="right"  class="icon-caret-right" ></i>
                <br>
              </div>
              <div bs-modal="'app/partials/roweditor.html'" class='row-tab bgWarning' ng-show="row.editable">
                <i bs-tooltip="'Configure row'" data-placement="right"  class="icon-cog pointer"></i>
                <br>
              </div>
              <div ng-show="rowSpan(row) > 12" class='row-tab bgDanger'>
                <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign"></i>
                <br>
              </div>
            </div>

          </div>

          <div style="padding-top:0px" ng-if="!row.collapse">

            <!-- Panels -->
            <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
              <!-- Content Panel -->
              <div style="position:relative">
                <kibana-panel type="panel.type" ng-cloak></kibana-panel>
              </div>
            </div>

            <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
            </div>

            <span bs-modal="'app/partials/roweditor.html'" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
              <i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
            </span>

            <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
        <div class="span12" style="text-align:right;">
          <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
            <span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
          </span>
        </div>
      </div>


    </div>
  </div>
</div>