<div class="row-fluid container" style="margin-top:10px; width:98%">
    <!-- Rows -->
    <div class="row-fluid 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="row-fluid" style="padding:0px;margin:0px;position:relative;">
                <div class="row-close span12" ng-show="row.collapse" data-placement="bottom">
                    <span class="row-button" 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" ng-click="toggle_row(row)" ng-show="row.collapsable">
                        <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-expand 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:left" class="row-open" ng-show="!row.collapse">
                    <span ng-show="row.collapsable">
                        <i bs-tooltip="'Hide row'" data-placement="right" class="icon-collapse-top" ng-click="toggle_row(row)"></i>
                        <br>
                    </span>
                    <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable">
                        <i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i>
                        <br>
                    </span>
                    <span ng-show="rowSpan(row) == 12 && row.editable">
                        <i bs-tooltip="'Row full. Create a new row to add more panels'" data-placement="right"
                           class="icon-trello"></i>
                        <br>
                    </span>
                    <span ng-show="rowSpan(row) > 12">
                        <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right"
                           class="icon-warning-sign text-warning"></i>
                        <br>
                    </span>
                </div>
            </div>

            <div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
                <!-- Panels -->
                <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.span == 0 || panel.hide"
                     class="span{{panel.span}} panel nospace" style="min-height:{{row.height}}; position:relative"
                     data-drop="true" ng-model="row.panels" data-jqyoui-options
                     jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}">
                    <!-- Error Panel -->
                    <div class="row-fluid">
                        <div class="span12 alert alert-error panel-error" ng-hide="!panel.error">
                            <a class="close" ng-click="panel.error=false">&times;</a>
                            <i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
                        </div>
                    </div>
                    <!-- Content Panel -->
                    <div class="row-fluid" style="position:relative"
                         ng-class="{'dragInProgress':dashboard.panelDragging}">
                        <kibana-panel type="panel.type" ng-cloak></kibana-panel>
                    </div>
                </div>

                <div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints"
                     class="panel span{{(12-rowSpan(row))}}" ng-class="{'dragInProgress':dashboard.panelDragging}"
                     style="height:{{row.height}};" data-drop="true" ng-model="row.panels" data-jqyoui-options
                     jqyoui-droppable="{index:row.panels.length,onDrop:'panelMoveDrop({{(12-rowSpan(row))}})',onOver:'panelMoveOver(false)',onOut:'panelMoveOut'}">
                    <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable && !dashboard.panelDragging">
                        <i ng-hide="rowSpan(row) == 0" class="pointer icon-plus-sign" ng-click="editor.index = 1"
                           bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
                        <span ng-click="editor.index = 1" style="margin-top: 8px; margin-left: 3px" ng-show="rowSpan(row) == 0"
                              class="btn btn-mini">Add panel to empty row</span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid" ng-show='dashboard.current.editable'>
        <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>
