<div ng-if="vm.selectedPanel" class="pp-paneladministration" ng-style="{width: vm.panelWidth()}" style="max-width:100%;">    
    <div class="pp-paneladministration-heading">
        <span class="pp-paneladministration-icon">
            <span ng-if="!vm.selectedPanel.value.icon.icon" class="glyphicon glyphicon-minus" title="No icon"></span>
            <span ng-if="vm.selectedPanel.value.icon.icon" ng-class="vm.selectedPanel.value.icon.icon"></span>
        </span>
        <span class="pp-paneladministration-title">
            <span ng-show="vm.selectedPanel.title.length==0">{{'[Empty]'|translate}}</span>
            {{vm.selectedPanel.value.label || vm.selectedPanel.title}}
        </span>
    </div>
    <div ui-sortable="vm.sortableOptions.sections" ng-model="vm.selectedPanel.children">
        <div class="pp-section row" ng-class="{sortableDisabled:vm.isCheckedToSomeoneElse()}"
             ng-repeat="section in vm.selectedPanel.children  | notDeletedFilter">

            <div class="pp-section-header">
                <a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-section-title cursor-pointer" ng-click="vm.editSection(vm.selectedPanel, section);" title="{{'Edit section' | translate}}">
                    <i class="ms-Icon ms-Icon--Edit"></i><span ng-show="section.title.length==0">{{'[Empty]'|translate}}</span>Edit {{section.title}}
                </a>
                <span ng-show="vm.isCheckedToSomeoneElse()" class="pp-section-title" title="{{'Section' | translate}}">
                    <span ng-show="section.title.length==0">{{'[Empty]'|translate}}</span>{{section.title}}
                </span>
                <div class="pp-section-header-meta pull-right cursor-pointer">
                    <i ng-show="section.value.noWebpartBackground" class="ms-Icon ms-Icon--BackgroundColor" title="{{'Background is not enabled for section'|translate}}"></i>
                </div>
            </div>
            <div class="pp-section-content">
                <div class="pp-component-zone" ng-class="vm.getColumnWidth(section, 1)" sectionId="{{section.id}}" columnIndex="1" 
                     ui-sortable="vm.sortableOptions.components" ng-model="section.columns[0]">
                    <div class="pp-component" ng-class="{sortableDisabled:vm.isCheckedToSomeoneElse()}" ng-repeat="component in section.columns[0] | notDeletedFilter">
                        <div wizdom-include="'component'"></div>
                    </div>
                    <a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-component-add cursor-pointer" ng-click="vm.addComponent(section);"><i class="ms-Icon ms-Icon--Add"></i>{{'Add component' | translate}}</a>
                </div>
                <div class="pp-component-zone" ng-class="vm.getColumnWidth(section, 2)" sectionId="{{section.id}}" columnIndex="2" 
                     ui-sortable="vm.sortableOptions.components" ng-model="section.columns[1]">
                    <div class="pp-component" ng-class="{sortableDisabled:vm.isCheckedToSomeoneElse()}" ng-repeat="component in section.columns[1] | notDeletedFilter">
                        <div wizdom-include="'component'"></div>
                    </div>
                    <a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-component-add cursor-pointer" ng-click="vm.addComponent(section, 2);"><i class="ms-Icon ms-Icon--Add"></i>{{'Add component' | translate}}</a>
                </div>
                <div class="pp-component-zone" ng-class="vm.getColumnWidth(section, 3)" sectionId="{{section.id}}" columnIndex="3" 
                     ui-sortable="vm.sortableOptions.components" ng-model="section.columns[2]">
                    <div class="pp-component" ng-class="{sortableDisabled:vm.isCheckedToSomeoneElse()}" ng-repeat="component in section.columns[2] | notDeletedFilter">
                        <div wizdom-include="'component'"></div>
                    </div>
                    <a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-component-add cursor-pointer" ng-click="vm.addComponent(section, 3);"><i class="ms-Icon ms-Icon--Add"></i>{{'Add component' | translate}}</a>
                </div>
            </div>         
        </div>
    </div>
    <div ng-show="!vm.isCheckedToSomeoneElse()" class="pp-paneladministration-footer">
        <a class="cursor-pointer" ng-click="vm.addSection(vm.selectedPanel);"><i class="ms-Icon ms-Icon--Add"></i>{{'Add section' | translate}}</a>
    </div>

    <script type="text/ng-template" id="component">
		<a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-component-title cursor-pointer" ng-click="vm.editComponent(section, component);">
			<i class="ms-Icon ms-Icon--Edit"></i>Edit <span ng-show="component.title.length==0">{{'[Empty]'|translate}}</span>{{component.title}}
		</a>
		<span ng-show="vm.isCheckedToSomeoneElse()" class="pp-component-title">
			<span ng-show="component.title.length==0">{{'[Empty]'|translate}}</span>{{component.title}}
		</span>
    </script>
</div>

