<div ng-show="vm.showWP" class="canteen-menu-content">
    <div ng-if="!vm.editMode">
        <div class="menu-content">
            <a class="btn btn-link" ng-click="vm.showOtherDay(-1)" ng-show="vm.showPrevDayButton()">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <span class="btn btn-link" ng-show="!vm.showPrevDayButton()">
                <span style="color:transparent" class="glyphicon glyphicon-chevron-left"></span>
            </span>
            <span class="dateText wt-capFirstLetter">
                {{vm.todaysMenu.date | date:"EEEE" | translate}} {{vm.todaysMenu.date | date:"d. MMM"}}
            </span>
            <a class="btn btn-link" ng-click="vm.datepicker.toggleDatepicker()">
                <span class="glyphicon glyphicon-calendar"></span>
                <span class="input-group canteen-datepicker">
                    <input ng-model="vm.selectedDate"
                           type="text"
                           datepicker-popup="dd-MM-yyyy"
                           datepicker-options="vm.datepicker.options"
                           is-open="vm.datepicker.opened"
                           class="form-control ng-hide" />
                </span>
            </a>
            <a class="btn btn-link" ng-click="vm.showOtherDay(1)" ng-show="vm.showNextDayButton()">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
            <span class="btn btn-link" ng-show="!vm.showNextDayButton()">
                <span style="color:transparent;" class="glyphicon glyphicon-chevron-right"></span>
            </span>
        </div>
        <div ng-if="vm.todaysMenu.imageUrl" class="canteen-menu-imageContainer">
            <img ng-if="vm.todaysMenu.imageUrl" style="width:100%;" ng-src="{{vm.todaysMenu.imageUrl}}" />
        </div>
        
        <div ng-if="vm.todaysMenu.description" class="canteen-menu-display-group">
            <div ng-if="vm.todaysMenu.description" class="fr-view" ng-bind-html="vm.todaysMenu.description | wizdom365TrustHtml"></div>
        </div>
        <div class="canteen-menu-contentBlock">
            <div class="canteen-menu-display-group">
                <!-- <span ng-if="vm.todaysMenu.nutrition" class="glyphicon glyphicon-flag"></span> -->
                <div ng-bind-html="vm.todaysMenu.nutrition | wizdom365TrustHtml" class="canteen-menu-nutrition fr-view"></div>
            </div>
        </div>
    </div>
    <div ng-if="vm.editMode">
        <div>
            <p class="input-group canteen-datepicker">
                <input ng-model="vm.selectedDate"
                       type="text"
                       datepicker-popup="dd-MM-yyyy"
                       datepicker-options="vm.datepicker.options"
                       is-open="vm.datepicker.opened"
                       class="form-control ng-hide" />
            </p>
            <a class="btn btn-link" ng-click="vm.showOtherDay(-1)" ng-show="vm.showPrevDayButton()">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <span class="btn btn-link" style="display:inline-block;min-width:150px" ng-click="vm.datepicker.toggleDatepicker()">
                {{vm.todaysMenu.date | date:"EEEE" | translate}} {{vm.todaysMenu.date | date:"d. MMM"}}
            </span>
            <a class="btn btn-link" ng-click="vm.showOtherDay(1)" ng-show="vm.showNextDayButton()">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">{{'Image' | translate}}</div>
            <div class="panel-body">
                <!-- Image section start -->
                <a title="{{'Remove image'|translate}}" ng-click="vm.todaysMenu.imageUrl = ''" ng-if="vm.todaysMenu.imageUrl!=''">
                    <i class="glyphicon glyphicon-remove removePicture"></i>
                </a>
                <wizdom365-image-picker class="imagePicker" ng-model="vm.todaysMenu.imageUrl" wizdommodule="CanteenMenu" subfolder="'MenuImages'"></wizdom365-image-picker>
                <img ng-if="vm.todaysMenu.imageUrl" style="width:100%;" ng-src="{{vm.todaysMenu.imageUrl}}" />
                <!-- <a ng-show="!vm.todaysMenu.imageUrl" ng-click="vm.activateUploader()" >{{'Click to add image'|translate}}...</a> -->
                <!-- Image section end -->
            </div>
        </div>
        <div class="canteen-menu-contentBlock">
            <div class="panel panel-default">
                <div class="panel-heading">{{"Menu text" | translate}}</div>
                <div class="panel-body">
                    <!-- Menu text section -->
                    <div class="canteen-menu-display-group clickable" ng-if="!vm.isEditingDescription" ng-mouseenter="mouseOver = true" ng-mouseleave="mouseOver = false">
                        <span style="min-height:20px;" ng-click="vm.editObject.description = vm.todaysMenu.description; vm.isEditingDescription = true">
                            <i class="glyphicon glyphicon-pencil"></i>
                            <span ng-if="vm.todaysMenu.description" class="fr-view" ng-bind-html="vm.todaysMenu.description | wizdom365TrustHtml"></span>
                        </span>
                    </div>
                    <div ng-if="vm.isEditingDescription">
                        <div class="form-group">
                            <textarea class="form-control" ng-model="vm.editObject.description" style="height:200px" toolbar-configuration="TodaysMenu" ui-tinymce="vm.tinyMceOptions" />
                        </div>
                        <div class="form-actions pull-right">
                            <button ng-click="vm.discardFieldChanges('description'); vm.isEditingDescription = false;" type="button" class="btn btn-default">
                                {{'Cancel' | translate}}
                            </button>
                            <button ng-click="vm.saveFieldChanges('description'); vm.isEditingDescription = false;" type="button" class="btn btn-success">
                                {{'Save' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="canteen-menu-contentBlock">
            <div class="panel panel-default">
                <div class="panel-heading">{{'Nutrition'|translate}}</div>
                <div class="panel-body">
                    <!-- Nutrition section start -->
                    <div ng-if="!vm.isEditingNutrition" class="canteen-menu-display-group clickable" ng-mouseenter="mouseOver = true" ng-mouseleave="mouseOver = false;">
                        <span style="min-height:20px;" ng-click="vm.editObject.nutrition = vm.todaysMenu.nutrition; vm.isEditingNutrition = true">
                            <i class="glyphicon glyphicon-pencil"></i>
                            <span ng-if="vm.todaysMenu.nutrition" class="fr-view" ng-bind-html="vm.todaysMenu.nutrition | wizdom365TrustHtml"></span>
                        </span>
                    </div>
                    <div ng-if="vm.isEditingNutrition">
                        <div class="form-group">
                            <textarea class="form-control" ng-model="vm.editObject.nutrition" style="height:150px" toolbar-configuration="TodaysMenu" ui-tinymce="vm.tinyMceOptions" />
                        </div>
                        <div class="form-actions pull-right">
                            <button ng-click="vm.discardFieldChanges('nutrition'); vm.isEditingNutrition = false;" type="button" class="btn btn-default">
                                {{'Cancel' | translate}}
                            </button>
                            <button ng-click="vm.saveFieldChanges('nutrition'); vm.isEditingNutrition = false;" type="button" class="btn btn-success">
                                {{'Save' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="canteen-menu-horizontal-row"></div>-->
    <div class="canteen-menu-contentBlock footer-block">
        <div ng-show="vm.canteens" class="content-left">
            <div class="clickable pull-left">
                <a data-toggle="dropdown" ng-show="vm.canteens.length > 1">{{vm.currentCanteen.title}}&nbsp;<span class="glyphicon glyphicon glyphicon-chevron-down"></span></a>
                <span ng-show="vm.canteens.length == 1" class="notClickable">{{vm.currentCanteen.title}}</span>
                <span ng-if="vm.currentCanteen.description" ng-click="vm.canteenInfo()" class="canteen-description glyphicon glyphicon-info-sign"></span>
                <ul class="dropdown-menu" role="menu">
                    <li ng-repeat="canteen in vm.canteens | orderBy: 'title'"><a ng-click="vm.changeCanteen(canteen)">{{canteen.title}}</a></li>
                </ul>
            </div>
        </div>
        <div class="content-right">
            <i ng-show="vm.currentCanteen.isEditor;" ng-click="vm.toggleEditMode()" class="glyphicon glyphicon-edit"></i>
            <a ng-show="!vm.editMode && vm.currentCanteen.isEditor;" ng-click="vm.toggleEditMode()"> {{'Edit' | translate}} </a>
            <a ng-show="vm.editMode && vm.currentCanteen.isEditor;" ng-click="vm.toggleEditMode()"> {{'Stop edit' | translate}} </a>
            <i ng-show="vm.editMode || webpartProperties.alwaysShowPrintIcon;" ng-click="vm.print()" class="glyphicon glyphicon-print"></i>
        </div>
    </div>
</div>