<div class="widget-wrapper">
    <i ng-if="isRepeated(container)" class="fa fa-list-ul Component-marker" title="{{ 'Repeated container' | translate }}"></i>
    <component-mover component="container" on-delete="editor.removeCurrentComponent()" ng-if="editor.isCurrentComponent(container)"></component-mover>
    <div ng-repeat="row in container.rows" ng-init="rowIndex = $index" >

        <div ng-if="$first && !isEmpty(container)" class="row dropRow"  bo-dropzone bo-drop-success="dropBeforeRow($data, $event, $index, container.rows)" ></div>
        <div class="row row-builder" ng-class="{'row-element':moveRowUpVisible(row) || moveRowDownVisible(row) || container.rows.length > 1,  'row-separator': !$last}">

            <div class="component-caption component-caption--row"
                 ng-if="moveRowUpVisible(row) || moveRowDownVisible(row) || container.rows.length > 1">
                <translate>Row</translate>
                <button class="fa fa-arrow-circle-up btn-caption move-row-up" title="{{ 'Move the row up' | translate }}" ng-click="moveRowUp(row, $event)" ng-if="moveRowUpVisible(row)"></button>
                <button class="fa fa-arrow-circle-down btn-caption move-row-down" title="{{ 'Move the row down' | translate }}" ng-click="moveRowDown(row, $event)" ng-if="moveRowDownVisible(row)"></button>
                <button class="fa fa-times-circle btn-caption" title="Delete the row" ng-click="removeRow(row)"  ng-if="container.rows.length > 1"></button>
            </div>

            <div ng-repeat="component in row" class="component" ng-class="editor.componentClasses(component)"  bo-draggable bo-draggable-data="component" bo-drop-item="dropItem($data, row, rowIndex)">
                <i ng-if="isModalInContainer(component)" class="fa fa-times-circle Component-marker error-icon" title="{{ 'A modal container cannot be located in another container. Recommendation: drop all modal containers at the bottom of the whiteboard.' | translate }}"></i>
                <div ng-include="component.$$templateUrl" ng-class="{'error':isModalInContainer(component)}"></div>
            </div>

            <div ng-if="editor.rowSize(row) < 12"
                 bo-dropzone
                 bo-drop-success="dropAtEndOfTheRow($data, $event, row)"
                 data-col="{{12 - editor.rowSize(row)}}"
                 class="widget-placeholder drop-container col-xs-{{12 - editor.rowSize(row)}}">
            </div>
        </div>
        <div ng-if="!isEmpty(container)" class="row dropRow" ng-class="{ 'dropRow--last': $last }" bo-dropzone bo-drop-success="dropAfterRow($data, $event, $index, container.rows)" ></div>
    </div>
</div>
