<div ng-hide="pageState == 'done'" class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'New Wizdom page' | 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>{{'Title' | translate}}*</label>
            <input type="text" class="form-control" ng-model="pageTitle" required />
        </div>
        <div class="form-group">
            <label>{{'Template' | translate}}</label>
            <select class="form-control" ng-model="selectedTemplate" ng-options="template.displayName for template in templates" required></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 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 page..." | translate}}</span>
            <span ng-show="progress > 1">{{"Applying Wizdom template..." | translate}}</span>
        </div>
    </div>

    <div ng-show="pageState == 'redirecting'" class="show-hide-slide">
        <div class="close-btn-container">
            <button type="button" class="close closebtn" data-ng-click="redirectPage()" aria-hidden="true">&times;</button>
        </div>
        <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>           
            <p class="success-message">{{'Redirecting to page' | translate}}...</p>
        </div>
    </div>   
</div>
<div class="modal-footer" ng-show="pageState == 'siteInfo'">
    <button type="submit" class="btn btn-success wiz-btn-padding" ng-disabled="!pageTitle" ng-click="createPage()">{{'Create page' | translate}}</button>
</div>