<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'New Wizdom subsite' | translate}}</h1>
</div>
<div class="modal-body">
    <div ng-show="pageState == 'loadingTemplate'" class="show-hide-slide">
        <div class="ms-dlgLoadingTextDiv ms-alignCenter">
            <span class="ms-core-pageTitle ms-accentText">{{'Loading templates. Please wait' | translate}}...</span>
        </div>
    </div>

    <form role="form" ng-show="pageState == 'siteInfo'" name="siteInfoForm" class="show-hide-slide">

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">

                    <div class="form-group">
                        <label class="control-label">{{'Title' | translate}}*</label>
                        <input class="form-control" ng-model="site.title" ng-model-options="{ updateOn: 'default blur' }" ng-blur="updateURLName()" ng-required="true" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Description' | translate}}</label>
                        <input class="form-control" ng-model="site.description" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'URL Name' | translate}}*</label>
                        <div class="form-inline">
                            {{spWebUrl}}/
                            <input class="form-control" ng-model="site.url" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Template' | translate}}*</label>
                        <select class="form-control" ng-model="selectedTemplate" ng-options="template.displayName for template in templates"></select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Use unique permissions for this site' | translate}}</label><br />
                        <select class="form-control" ng-model="site.useUniquePermissions" ng-options="item ?('Yes' | translate):('No' | translate) for item in [true, false]"></select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Use the top link bar from the parent site' | translate}}?</label><br />
                        <select class="form-control" ng-model="site.useParentNavigation" ng-options="item ? ('Yes' | translate):('No' | translate) for item in [true, false]"></select>
                    </div>
                    <div class="form-group">
                    </div>

                </div>
            </div>
        </div>
    </form>
    <div ng-show="pageState == '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 ng-show="pageState == 'done'" class="show-hide-slide">
        <div class="ms-dlgLoadingTextDiv ms-alignCenter">
            <span class="ms-core-pageTitle ms-accentText">{{'Redirecting to website' | translate}}...</span>
        </div>
    </div>
</div>
<div class="modal-footer" ng-show="pageState == 'siteInfo'">
    <button type="submit" class="btn btn-success wiz-btn-padding" ng-click="createSite()" ng-disabled="siteInfoForm.$invalid">{{(selectedTemplate.form && selectedTemplate.form.length>0) ? 'Next' : 'Create site' | translate}}</button>
</div>