<div class="lt-module-page__content">
    <div class="container-fluid" ng-class="{editable: !vm.isCheckedToSomeoneElse()}">
        <div class="wizdom-controls">
            <div class="row wizdom-controls-row noborder">
                <div class="col-xs-12">
                    <div ng-show="vm.isCheckedToSomeoneElse()" class="checkout-status-bar col-xs-12 alert alert-warning" role="alert">                        
                        <i class="glyphicon glyphicon-warning-sign"></i> {{'Checked out by ' | translate}}{{vm.checkedOutInfo.CheckedOutBy}} at {{vm.checkedOutInfo.CheckedOutTime | date:'dd MMM yyyy HH:mm:ss'}}
                        <a href="" ng-hide="vm.working" ng-click="vm.overrideCheckout()">{{'Override checkout' | translate}}</a>
                    </div>
                </div>
            </div>

            <div class="row wizdom-controls-row noborder">
                <div class="col-xs-4">
                    <div ui-sortable="vm.sortableOptions.panels" ng-model="vm.powerpanel.children">
                        <div class="pp-panel col-md-12" ng-class="{sortableDisabled:vm.isCheckedToSomeoneElse()}" ng-repeat="panel in vm.powerpanel.children | notDeletedFilter">
                            <div class="pp-icon" ng-class="{selected: vm.selectedPanel == panel}">
                                <span ng-if="!panel.value.icon.icon" class="glyphicon glyphicon-minus" title="No icon"></span>
                                <span ng-if="panel.value.icon.icon" ng-class="panel.value.icon.icon"></span>
                            </div>
                            <div class="pp-editpanel" ng-class="{selected: vm.selectedPanel == panel}">
                                <a ng-show="!vm.isCheckedToSomeoneElse()" class="pp-title cursor-pointer" ng-click="vm.editPanel(vm.powerpanel, panel);" title="{{'Edit panel metadata' | translate}}">
                                    <span ng-show="panel.title.length==0">
                                        Edit {{'[Empty]'|translate}}
                                    </span><i class="ms-Icon ms-Icon--Edit"></i>Edit {{panel.title}}
                                </a>
                                <span ng-show="vm.isCheckedToSomeoneElse()" class="pp-title">
                                    <span ng-show="panel.title.length==0">
                                        {{'[Empty]'|translate}}
                                    </span>{{panel.title}}
                                </span>

                                <a class="pp-show cursor-pointer" ng-click="vm.selectPanel(panel)" title="{{'Show panel' | translate}}"><i class="ms-Icon ms-Icon--FullWidthEdit"></i>{{'Show panel' | translate}}</a>
                                <i class="pp-translationicon ms-Icon ms-Icon--Flag" style="cursor:default" title="{{'Language is set' | translate}}" ng-show="panel.translations && panel.translations.length > 0"></i>
                                <i class="pp-audienceicon ms-Icon ms-Icon--People" style="cursor:default" title="{{'Audience is set' | translate}}" ng-show="panel.audiences && panel.audiences.length > 0"></i>
                            </div>
                        </div>
                    </div>
                    <div class="pp-add-panel" ng-hide="vm.isCheckedToSomeoneElse()">
                        <a class="cursor-pointer" ng-click="vm.addPanel(vm.powerpanel, 'powerpanel-panel');" ng-hide="vm.readOnlyMode || vm.working"><i class="ms-Icon ms-Icon--Add"></i>{{'Add' | translate}}</a>
                    </div>
                </div>
                <div class="col-xs-8">
                    <div wizdom-include="'Powerpanel/Templates/Administration/WidgetBuilderPanel.html'"></div>
                </div>
            </div>
        </div>
    </div>
</div>