<div class='ProjectSpace newSiteDialog 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>{{'Project type' | translate}}</h3>
                        
                        <div class="siteTypeContainer">
                            <table>
                                <tr ng-repeat="siteTypeCol in siteTypesAsGrid">
                                    <td ng-repeat="siteType in siteTypeCol" class="sitetype" ng-class="{notReady:!siteType.isReadyForCreation}" ng-click="selectSiteType(siteType)" title="{{(siteType.isReadyForCreation ? '' : 'A site repository for this type is not ready yet.') | translate}}" >
                                        <div class="img" ng-style="{backgroundImage:'url(\'' + siteType.image + '\')'}"></div>
                                        <div class="name">{{siteType.name}}</div>
                                        <div class="description" ng-bind-html="siteType.description" ng-if="siteType.description"></div>
                                    </td>
                                    <td v-if="siteTypeCol.length==1">&nbsp;</td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-show="activeScene === 'Metadata'">
                <h3>{{"Fill out metadata" | translate}}</h3>
                <div class="form-group">
                    <label class="control-label">{{ "Title" | translate }}</label>
                    <input class="form-control" type="text" ng-model="siteName" ng-required="true" ng-keypress="CheckForEnter($event)" />
                </div>
                <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 }}</label>
                    <div wizdom365-principalpicker
                         allowmultiple="{{role.allowMultiple}}"
                         mode="{{role.allowedPrincipalTypes}}" 
                         domain="{{role.allowedPrincipalDomains}}" 
                         alloweveryone="true"
                         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" ng-show="progress > 0">{{progress}}%</span>
                    </div> 
                </div>
                <span ng-show="progress < 1">{{"SharePoint is creating your site..." | translate}}</span>
                <span ng-show="progress > 1">{{"Applying Wizdom template..." | translate}}</span>
            </div>
        </div>
    </div>
        <div class="modal-footer" ng-show="dialogReady && !working && activeScene != 'Info'">
            <button ng-disabled="working" ng-click="cancel()" class="btn btn-default">{{'Cancel' | translate}}</button>
            <button ng-show="selectedSiteType.isReadyForCreation" ng-disabled="working || activeScene == firstScene" ng-click="changeScene(-1);" class="btn btn-default">{{"Back" | translate}}</button>
            <button ng-show="selectedSiteType.isReadyForCreation && activeScene !== lastScene" ng-disabled="working" ng-click="changeScene(1);" class="btn btn-primary">{{"Next" | translate}}</button>
            <button ng-show="selectedSiteType.isReadyForCreation && activeScene === lastScene" ng-disabled="working" ng-click="createNewSite(siteName, selectedSiteType.id);" class="btn btn-success">{{'Create' | translate}}</button>
        </div>
    </div>