<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 ng-show="id < 0" class="modal-title">{{'Create canteen' | translate}}</h1>
    <h1 ng-show="id >= 0" class="modal-title">{{'Edit canteen' | translate}}</h1>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-ng-if="canteen.id > 0" data-ng-click="deleteCanteen()">{{'Delete' | translate}}</button>
    <button class="btn btn-default" ng-click="cancel()">{{'Cancel' | translate}}</button>
    <button class="btn btn-primary" ng-click="saveCanteen()">{{'Save' | translate}}</button>
</div>
<div class="modal-body">
    <div wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="loading">
        <form>
            <div class="container-fluid">
                <div class="row">
                    <div wizdom365-spinner="" loading="loading"></div>
                    <div class="col-sm-12" ng-hide="loading">
                        <div class="form-group">
                            <label class="control-label">{{'Name' | translate}}</label>
                            <input type="text" name="title" class="form-control ie11focusfix" data-ng-model="canteen.title" required />
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Location' | translate}}</label>
                            <input type="text" class="form-control" autocomplete="off" ng-model="canteen.location" typeahead="location for location in locations | filter:$viewValue | limitTo:8" placeholder="{{'Select location' | translate}}">
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Editors' | translate}}</label>
                            <div wizdom365-principalpicker principals="canteen.editors" allowwizdomgroups="true" wizdom365-set-focus="true"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                {{'Banner' | translate}}
                            </label>
                            <wizdom365-image-picker ng-model="canteen.imageUrl"></wizdom365-image-picker>
                            <img ng-src="{{canteen.imageUrl}}"
                                 style="max-height: 200px; max-width: 200px;"
                                 ng-show="canteen.imageUrl" />
                            <a class="glyphicon glyphicon-trash"
                               aria-hidden="true"
                               ng-show="canteen.imageUrl"
                               ng-click="deleteImage()">
                            </a>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Description' | translate}}</label>
                            <textarea class="form-control" ng-model="canteen.description"
                                      style="height:150px"
                                      toolbar-configuration="TodaysMenu"
                                      ui-tinymce="tinyMceOptions"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
