<div>

<div class="modal-header" ng-if="!$ctrl.hideHeader">

<button type="button" class="close wizard-pf-dismiss" aria-label="Close" ng-click="$ctrl.onCancel()" ng-if="!$ctrl.embedInPage">

<span aria-hidden="true">&times;</span>

</button>

<dt class="modal-title">{{$ctrl.title}}</dt>

</div>

<div class="modal-body wizard-pf-body clearfix">

<!-- step area -->

<div class="wizard-pf-steps" ng-class="{'invisible': !$ctrl.wizardReady}">

<ul class="wizard-pf-steps-indicator" ng-if="!$ctrl.hideIndicators" ng-class="{'invisible': !$ctrl.wizardReady}">

<li class="wizard-pf-step" ng-class="{active: step.selected}" ng-repeat="step in $ctrl.getEnabledSteps()" data-tabgroup="{{$index }}">

<a ng-click="$ctrl.stepClick(step)" ng-class="{'disabled': !$ctrl.allowStepIndicatorClick(step)}">

<span class="wizard-pf-step-number">{{$index + 1}}</span>

<span class="wizard-pf-step-title">{{step.title}}</span>

</a>

</li>

</ul>

</div>

<!-- loading wizard placeholder -->

<div ng-if="!$ctrl.wizardReady" class="wizard-pf-main" style="margin-left: 0px">

<div class="wizard-pf-loading blank-slate-pf">

<div class="spinner spinner-lg blank-slate-pf-icon"></div>

<h3 class="blank-slate-pf-main-action">{{$ctrl.loadingWizardTitle}}</h3>

<p class="blank-slate-pf-secondary-action">{{$ctrl.loadingSecondaryInformation}}</p>

</div>

</div>

<div class="wizard-pf-position-override" ng-transclude ></div>

</div>

<div class="modal-footer wizard-pf-footer wizard-pf-position-override" ng-class="{'wizard-pf-footer-inline': $ctrl.embedInPage}">

<pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel"

ng-class="{'wizard-pf-cancel-no-back': $ctrl.hideBackButton}"

ng-disabled="$ctrl.wizardDone" ng-click="$ctrl.onCancel()"

ng-if="!$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>

<div ng-if="!$ctrl.hideBackButton" class="tooltip-wrapper" uib-tooltip="{{$ctrl.prevTooltip}}" tooltip-placement="left">

<pf-wiz-previous id="backButton"

class="btn btn-default"

ng-disabled="!$ctrl.wizardReady || $ctrl.wizardDone || !$ctrl.selectedStep.prevEnabled || $ctrl.firstStep"

callback="$ctrl.backCallback">{{$ctrl.backTitle}}</pf-wiz-previous>

</div>

<div class="tooltip-wrapper" uib-tooltip="{{$ctrl.nextTooltip}}" tooltip-placement="left">

<pf-wiz-next id="nextButton"

class="btn btn-primary wizard-pf-next"

ng-disabled="!$ctrl.wizardReady || !$ctrl.selectedStep.nextEnabled"

callback="$ctrl.nextCallback">{{$ctrl.nextTitle}}</pf-wiz-next>

</div>

<pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline"

ng-disabled="$ctrl.wizardDone"

ng-click="$ctrl.onCancel()"

ng-if="$ctrl.embedInPage">{{$ctrl.cancelTitle}}</pf-wiz-cancel>

</div>

</div>