patternfly/angular-patternfly

<div>
  <div class="modal-header" ng-if="!$ctrl.hideHeader">
    <button type="button" class="close wizard-pf-dismiss" aria-hidden="true" aria-label="Close" ng-click="$ctrl.onCancel()" ng-if="!$ctrl.embedInPage">
      <span class="pficon pficon-close"></span>
    </button>
    <h4 class="modal-title">{{$ctrl.wizardTitle}}</h4>
  </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 ng-if="!$ctrl.activeStepTitleOnly || step.selected" class="wizard-pf-step-title">{{step.title}}</span>
            <span class="wizard-pf-step-title-substep" ng-repeat="substep in step.steps track by $index" ng-class="{'active': substep.selected}">{{substep.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}">
    <button ng-if="!$ctrl.embedInPage"
            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()">
      {{$ctrl.cancelTitle}}
    </button>
    <button id="backButton"
            class="btn btn-default"
            ng-if="!$ctrl.hideBackButton"
            tooltip-append-to-body="true"
            uib-tooltip="{{$ctrl.prevTooltip}}"
            tooltip-placement="left"
            ng-disabled="!$ctrl.wizardReady || $ctrl.wizardDone || !$ctrl.selectedStep.isPrevEnabled() || $ctrl.firstStep"
            ng-click="$ctrl.previous()">
      {{$ctrl.backTitle}}
    </button>
    <button id="nextButton"
            class="btn btn-primary wizard-pf-next"
            uib-tooltip="{{$ctrl.nextTooltip}}"
            tooltip-append-to-body="true"
            tooltip-placement="left"
            ng-disabled="!$ctrl.wizardReady || !$ctrl.selectedStep.isNextEnabled()"
            ng-click="$ctrl.next()">
      {{$ctrl.nextTitle}}
    </button>
    <button ng-if="$ctrl.embedInPage"
            class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline"
            ng-disabled="$ctrl.wizardDone"
            ng-click="$ctrl.onCancel()">
      {{$ctrl.cancelTitle}}
    </button>
  </div>
</div>