<div class='w365cm bootstrap-wrapper'>
    <div class="modal-header">
        <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
        <h1 class="modal-title">{{'New site' | translate}}</h1>
    </div>
    <div class="modal-body">
        <div ng-hide="working">
            <div ng-show="activeScene == 'Info'">
                <div ng-hide="dialogReady">
                    <h4>
                        {{'Loading' | translate}}
                    </h4>
                    {{'Please wait' | translate}}...
                </div>
                <div ng-show="dialogReady">                    
                    <div>
                        <h3>{{"Course data" | translate}}</h3>
                        <div class="form-group">
                            <label class="control-label">{{ "Course name" | translate }}*</label>
                            <input class="form-control" type="text" ng-model="siteName" ng-required="true" ng-keypress="CheckForEnter($event)"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{ "Course type" | translate }}</label>
                            <select class="form-control" ng-model="selectedSiteType" ng-options="siteType.name | translate for siteType in siteTypes track by siteType.id"
                                    ng-change="siteTypeChanged(selectedSiteType.id)"></select>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-show="activeScene === 'Metadata'">
                <h3>{{"Fill out metadata" | translate}}</h3>
                <formly-form fields="metadataFields" result="metadataValues" options="metadataFormOptions" name="metaForm">
                </formly-form>
            </div>
            <div ng-show="activeScene === 'Roles'">
                <h3>{{"Role assignments" | translate}}</h3>
                <div class="form-group" ng-repeat="role in siteRoles|filter:filterRoles">
                    <label class="control-label">{{ role.name | translate }}</label>
                    <div wizdom365-principalpicker 
                         allowmultiple="{{role.allowMultiple}}" 
                         mode="{{role.allowedPrincipalTypes}}" 
                         domain="{{role.allowedPrincipalDomains}}" 
                         alloweveryone="true" 
                         allowwizdomgroups="{{role.internalName != 'W365CM_Participants' && role.internalName != 'W365CM_WaitingList'}}"
                         principals="role.principals" 
                         ng-keypress="CheckForEnter($event)"></div>                    
                </div>                
            </div>
        </div>        
        <div ng-show="working" class="show-hide-slide">
            <div class="ms-dlgLoadingTextDiv ms-alignCenter">
                <span style="vertical-align:super; padding-right: 10px;">
                    <img ng-src="{{spWebUrl}}/_layouts/15/images/gears_anv4.gif?rev=23">
                </span>
                <span class="ms-core-pageTitle ms-accentText">{{'Working on it' | translate}}...</span>
                <br />
                <br />
                <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width:progress + '%'}">
                        <span style="color:black">{{progress}}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="modal-footer" ng-show="dialogReady && !working">
            <button ng-disabled="working" ng-click="cancel()" class="btn btn-default">{{'Cancel' | translate}}</button>
            <button ng-disabled="working || activeScene == firstScene" ng-click="changeScene(-1);" class="btn btn-default">{{"Back" | translate}}</button>
            <button ng-show="activeScene !== lastScene" ng-disabled="working" ng-click="changeScene(1);" class="btn btn-primary">{{"Next" | translate}}</button>
            <button ng-show="activeScene === lastScene" ng-disabled="working" ng-click="createNewSite(siteName, selectedSiteType.id);" class="btn btn-success">{{'Create' | translate}}</button>
        </div>
    </div>