<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Apply Wizdom template' | 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'">
        <div class="form-group">
            <label>{{'Template' | translate}}</label>
            <select class="form-control" ng-model="selectedTemplate" ng-options="template.displayName for template in templates"></select>
        </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 style="border: solid 1px black; width: 100%;">
                <div style="background-color: gray;" ng-style="{width:progress + '%'}">&nbsp;</div>
            </div>-->
			<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="validateSiteInfo()">{{(selectedTemplate.form && selectedTemplate.form.length>0) ? 'Next' : 'Apply template' | translate}}</button>
</div>


