<div ng-controller="Wizdom365MegamenuMenuBuilderV2Controller as vm" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Menu builder' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div>
                {{'Configuration' | translate}}
            </div>
            <div class="lt-module-page--paddingleft">
                <wizdom365-specific-configuration-picker module="'Megamenu'"></wizdom365-specific-configuration-picker>
            </div>
            <div class="lt-module-page--paddingleft" ng-show="vm.isChekedOut">
                <div >
                    <div ng-show="vm.isChekedOutByMe">
                        <button class="btn btn-primary" ng-show="!vm.readOnlyMode" ng-disabled="vm.working" ng-click="vm.checkIn()">{{'Save' | translate}}</button>
                    </div>
                </div>
            </div>
            <div class="lt-module-page--paddingleft" ng-show="vm.isChekedOut">
                <div ng-show="vm.isChekedOut">
                    <div ng-show="vm.isChekedOutByMe">
                        <button class="btn btn-default" ng-show="!vm.readOnlyMode" ng-disabled="vm.working" ng-click="vm.discardChanges()">{{'Cancel' | translate}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <div ng-hide="vm.checkoutInfo==undefined || (vm.isChekedOut && vm.isChekedOutByMe)" class="checkout-status-bar col-xs-12 alert alert-warning" role="alert">
        <i class="streamline icon-information-circle" /> {{'Menu builder is checked out by {0} at {1}' | translate:[vm.checkoutInfo.CheckedOutBy, (vm.checkoutInfo.CheckedOutTime | date: 'dd MMM yyyy HH:mm:ss')]}}
        <a style="float:right" href="" ng-disabled="vm.working" ng-click="vm.overriteCheckOut()">{{'Override Checkout' | translate}}</a>
    </div>



        <div class="lt-module-page__content">
            <div class="container-fluid">

                <div class="row row wizdom-controls-row noborder">
                    <div class="col-xs-12">
                        <div class="pull-left">
                            <button class="btn" ng-class="{'btn-primary': vm.readOnlyMode, 'btn-default': vm.isChekedOut}" ng-disabled="vm.working" ng-click="vm.checkOut()">{{'Edit menu' | translate}}</button>
                        </div>
                        <div class="pull-left help-info" ng-class="{'move-down': vm.showHelpInfo}">
                            <a class="info-trigger" ng-show="!vm.showHelpInfo" ng-click="vm.showHelpInfo = !vm.showHelpInfo"><i class="streamline icon-information-circle"></i></a>
                            <div class="alert alert-info" ng-show="vm.showHelpInfo">
                                <i class="streamline icon-information-circle"></i>
                                <a href="#" class="close" aria-label="close" ng-click="vm.showHelpInfo = !vm.showHelpInfo">×</a>
                                <p>
                                    {{'Enable edit mode to build your menu.' | translate}}
                                    <br />
                                    {{'if newly modified element is not presented correctly, please refresh the page.' | translate}}
                                </p>
                            </div>
                        </div>
                        <wizdom365-spinner class="pull-left" style="margin:10px 100px;" loading="vm.working"></wizdom365-spinner>
                    </div>
                </div>
                <div class="row row wizdom-controls-row noborder">
                    <div class="col-sm-12">
                        <div ng-if="vm.audiences.length > 0" class="pull-right">
                            {{'Filter by audience' | translate}}:&nbsp;&nbsp;
                            <select class="form-control" style="display: inline; width: auto;" ng-model="vm.selectedAudienceFilter" ng-options="audience.displayName for audience in vm.audiences">
                                <option></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div ng-show="vm.selectedAudienceFilter" class="col-xs-12 alert alert-warning" role="alert" style="margin-bottom:5px;margin-top:5px;">
                    {{"Drag'n'drop sorting has been disabled, while audience filter is active" | translate}}
                </div>
                <div class="megamenuBuilder">
                    <div class="topItemsSection" ui-sortable="vm.sortableOptions.topItems" ng-model="vm.content.children">
                        <div class="topItems" ng-class="{sortableDisabled:vm.selectedAudienceFilter || vm.readOnlyMode}" ng-repeat="topItem in vm.content.children | filter: vm.audienceFilter | filter: vm.isNotDeleted">
                            <div class="topItemTitle" ng-click="vm.topitemSelected(topItem.id)" ng-class="(topItem.id == topItemSelectedId || (topItemSelectedId.length == null && $first )) ? 'topItemTitleSelected' : ''">
                                <a>{{topItem.title}}</a>
                                <i class="streamline icon-flag" title="{{'Language is set' | translate}}" ng-show="topItem.translations && topItem.translations.length > 0"></i>
                                <i class="streamline icon-single-neutral-actions-information" title="{{'Audience is set' | translate}}" ng-show="topItem.audiences && topItem.audiences.length > 0"></i>
                                <a ng-click="vm.edit(vm.content, topItem);"><i class="streamline icon-pencil-1" title="{{'Edit top level item' | translate}}"></i></a>
                            </div>
                        </div>
                        <a class="add-item" ng-click="vm.add(vm.content, 'TopItem');" ng-hide="vm.readOnlyMode || vm.working"><i class="glyphicon glyphicon-plus"></i>{{'Add' | translate}}</a>
                    </div>

                    <div class="columnsSection" ng-repeat="topItem in vm.content.children | filter: vm.isNotDeleted" ng-if="topItem.id == topItemSelectedId || (topItemSelectedId.length == null && $first )">
                        <div ui-sortable="vm.sortableOptions.columns" ng-model="topItem.children">
                            <div class="columnItems" ng-class="{sortableDisabled:vm.selectedAudienceFilter || vm.readOnlyMode}" ng-repeat="column in topItem.children | filter: vm.audienceFilter | filter: vm.isNotDeleted">
                                <div class="table itemSectionTop">
                                    <div class="tableRow">
                                        <div class="tableCell columnTitle">
                                            <a>{{'Section' | translate}}</a>&nbsp;
                                            <i class="streamline icon-single-neutral-actions-information" title="{{'Audience is set' | translate}}" ng-show="column.audiences && column.audiences.length > 0"></i>&nbsp;
                                            <a ng-click="vm.edit(topItem, column);"><i class="streamline icon-pencil-1"></i></a>
                                        </div>
                                    </div>
                                    <div class="tableRow itemContainer" ui-sortable="vm.sortableOptions.items" ng-model="column.children">
                                        <div ng-if="(column.children | filter: vm.audienceFilter | filter: vm.isNotDeleted).length==0" ng-class="{sortableDisabled:true}">
                                            &nbsp;
                                        </div>
                                        <div class="item" ng-class="{sortableDisabled:vm.selectedAudienceFilter || vm.readOnlyMode}" ng-repeat="item in column.children | filter: vm.audienceFilter | filter: vm.isNotDeleted">
                                            <div class="tableCell itemTitle">
                                                <a ng-click="vm.edit(column, item);"><span ng-show="item.title.length==0">{{'[Empty]'|translate}}</span>{{item.title}}</a>
                                                <i class="streamline icon-flag" title="{{'Language is set' | translate}}" ng-show="item.translations && item.translations.length > 0"></i>
                                                <i class="streamline icon-single-neutral-actions-information" title="{{'Audience is set' | translate}}" ng-show="item.audiences && item.audiences.length > 0"></i>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tableRow">
                                        <div class="tableCell">
                                            <div class="itemButtonDiv">
                                                <a class="add-item" ng-hide="vm.readOnlyMode || vm.working" ng-click="vm.add(column, 'Link');"><i class="glyphicon glyphicon-plus"></i>{{'Add' | translate}}</a>
                                            </div>
                                        </div>
                                    </div>

                                    <i ng-hide="vm.readOnlyMode || vm.working" class="glyphicon glyphicon-move"></i>
                                </div>
                            </div>
                            <div class="section-add-container" ng-hide="vm.readOnlyMode || vm.working">
                                <i class="glyphicon glyphicon-plus" ng-click="vm.add(topItem, 'Section');"></i>
                            </div>
                        </div>
                    </div>
                    <div class="pull-right" style="margin-top:10px;" ng-show="vm.isChekedOut">
                        <div ng-show="vm.isChekedOutByMe">
                            <button class="btn btn-primary" ng-show="!vm.readOnlyMode" ng-disabled="vm.working" ng-click="vm.checkIn()" style="min-width:80px;">{{'Save' | translate}}</button>
                            <button class="btn btn-default" ng-show="!vm.readOnlyMode" ng-disabled="vm.working" ng-click="vm.discardChanges()" style="min-width:80px;">{{'Cancel' | translate}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    

    <!--
    <br /><br /><br />
    <pre wizdom365-Debug>{{vm | json}}</pre>
    -->
</div>