<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="vm.close()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">Add new lightning page</h1>
</div>
<div class="template-editor">
    <div class="wizdom-middle-nav ">
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation" ng-class="{'active' : page=='settings' || !page}">
                <a ng-click="page='settings'">{{"Settings" | translate}}</a>
            </li>
            <li role="presentation" ng-class="{'active' : page=='html'}">
                <a ng-click="page='html'">{{"Html" | translate}} <span ng-show="vm.template !== 'custom'">{{" (readonly mode)" | translate}}</span></a> 
            </li>
            <!--<li role="presentation" ng-class="{'active' : page=='editWebparts'}">
                <a ng-click="page='editWebparts'">Edit webparts</a>
            </li>-->
            <li role="presentation" ng-class="{'active' : page=='view'}">
                <a ng-click="page='view'">{{"View" | translate}}</a>
            </li>
        </ul>
    </div>
</div>

<!-- Settings -->
<div class="modal-body" ng-show="page=='settings' || !page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">{{'General' | translate}}</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label>{{"Template" | translate}}</label>
                            <select id="predefinedTemplates" ng-model="vm.template" class="form-control" ng-change="vm.templateChanged()">
                                <option ng-repeat="option in vm.predefinedTemplates" value="{{option}}">{{option}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Url</label>
                            <input class="form-control" ng-model="vm.url" placeholder="ex. https://tenant.sharepoint.com/sites/intranet/index.html" />
                            <span style="color:red" ng-show="vm.isUrlInUse(vm.url)">
                                <span ng-show="vm.isUrlInUse(vm.url)">{{"This url is already in use" | translate}}</span>
                            </span>
                        </div>
                        <div class="form-group">
                            <label>{{"Culture" | translate}}</label>
                            <select id="predefinedTemplates" ng-model="vm.culture" class="form-control" ng-show="vm.wzLanguages && vm.wzLanguages.length > 0">
                                <option ng-repeat="lang in vm.wzLanguages" value="{{lang.Tag}}">{{lang.DisplayName | translate}}</option>
                            </select>
                            <div class="alert alert-warning" ng-show="!vm.wzLanguages || vm.wzLanguages.length < 1">
                                {{"Please select some languages in the laguage module under the admin tab" | translate}}
                            </div>
                        </div>
                    </div>
                </div>
                       
            </div>
      </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{'Noticeboard' | translate}}</div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>{{"Channelset" | translate}}</label>
                                    <select id="sharedChannelsets" ng-model="vm.channelsetId" class="form-control" ng-change="vm.channelSetChanged()">
                                        <option ng-repeat="option in vm.sharedChannelsets" value="{{option.id}}">{{option.name}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{'Corporate news' | translate}}</div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>{{"Url" | translate}}</label>
                                    <input class="form-control" type="text" ng-model="vm.corpNewsUrl" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">{{'People search' | translate}}</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label>{{"Search result source (GUID)" | translate}}</label>
                            <input class="form-control" ng-model="vm.peopleSearchResultSource" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
                <div class="row">
                    <div class="col-md-12">
                       
                    </div>
                </div>
            </div>
</div>

<!-- HTML -->
<div ng-show="page=='html'" style="height: 600px;">
    <div style="display: block; height: 100%; overflow-y: hidden; margin-top: -2px;"
         id="aceEditorContainer"
         ui-ace="{useWrapMode : true, showGutter: true, theme:'monokai', mode: 'html', showPrintMargin: false}"
         ng-model="vm.html"
         ng-readonly="vm.template !== 'custom'">
    </div>
</div>

<!-- view -->
<div ng-if="page=='view'" style="height: 600px;">
    <h3 class="text-center" ng-hide="vm.isPreviewAvailable">{{"Preview is only available when the page is saved" | translate}}</h3>
    <div ng-show="vm.isPreviewAvailable" class="text-center">
        <h3><a href="{{vm.url}}" target="_preview">{{"Click here to open preview" | translate}}</a></h3>
        <h4 ng-show="vm.unsavedChanges()">{{"Remember to click save, to see your unsaved changes!" | translate}}</h4>        
    </div>
</div>

<!-- editWebparts -->
<div ng-show="page=='editWebparts'" style="height: 600px;">
    <h3 class="text-center">{{"Generating preview, please wait..." | translate}}</h3>
</div>

<div class="modal-footer">
    <div class="alert alert-danger text-left" ng-if="vm.showSearchWarning">
        {{"Search is not configured correctly, this lightningpage might not work"}}
    </div>
    <button class="btn btn-default" ng-click="vm.close()">{{'Close' | translate}}</button>
    <button ng-show="vm.saving" class="btn btn-primary" disabled="disabled">{{'Saving, please wait' | translate}}</button>
    <button ng-hide="vm.saving" class="btn btn-primary" ng-click="vm.save()" ng-disabled="vm.isUrlInUse(vm.url)">{{'Save' | translate}}</button>
</div> 