<div pf-wizard
     title="Create new address"
     wizard-ready="deployProviderReady"
     hide-indicators="false"
     on-finish="finishedWizard()"
     on-cancel="cancelDeploymentWizard()"
     next-title="nextButtonTitle"
     next-callback="nextCallback"
     back-callback="backCallback"
     content-height="400"
     wizard-done="deployComplete || deployInProgress">
  <div pf-wizard-step step-title="Definition" substeps="false" step-id="semantics" step-priority="0" show-review="true" show-review-details="true"
       review-template="components/addresses/pattern-review.html" next-enabled="semantics_complete" on-show="onShow">
    <div ng-controller="SemanticsController">
      <form class="form-horizontal">
        <div pf-form-group pf-label="Name" pf-label-class="col-sm-2" pf-input-class="col-sm-10" required>
          <input id="new-name"  class="form-control" name="address" ng-model="data.address" type="text" maxlength=256  ng-change="updateName()" pf-validation="valid_address_name(input)" required/>
          <span class="help-block">The name must be unique and may not include # * / . : or whitespace.</span>
          <span title="" tooltip-append-to-body="true" tooltip-class="enmasse-tooltip" class="tip-block pull-left" uib-tooltip-html="getTooltip('name')">
              {{tooltip.address.name.label}}
          </span>
        </div>
        <div pf-form-group pf-label="Type" pf-label-class="col-sm-2" pf-input-class="col-sm-10">
          <div ng-repeat="type in valid_address_types()">
            <div pf-form-group pf-label-class="col-sm-2" pf-input-class="col-sm-10" pf-label="{{type.name}}">
              <input id="{{type.name}}" name="type" value="{{type.name}}" ng-model="data.type" type="radio" ng-change="updateName()" />
              <span title="" ng-if="hasTooltip(type.name)" tooltip-append-to-body="true" class="tip-block" tooltip-class="enmasse-tooltip" uib-tooltip-html="getTooltip(type.name)">
                {{getLabel(type.name)}} <span ng-if="hasExternal(type.name)"><a class="learn-more" target="_new" ng-href="{{getExternal(type.name)}}">Learn more <i class="fa fa-external-link small" aria-hidden="true"></i></a></span>
              </span>
              <span ng-if="!hasTooltip(type.name)">{{getLabel(type.name)}}</span>
            </div>
          </div>
        </div>

        <div pf-form-group pf-label="Topic" pf-label-class="col-sm-2" pf-input-class="col-sm-10" ng-if="data.type === 'subscription'">
          <select class="combobox form-control" name="topic" ng-model="data.topic" ng-change="updateName()">
            <option ng-repeat="topic_name in list_topic_names()" value="{{topic_name}}">{{topic_name}}</option>
          </select>
        </div>

      </form>
    </div>
  </div>
  <div pf-wizard-step step-title="Plan" substeps="false" step-id="plan" step-priority="1" show-review="true" show-review-details="true" review-template="components/addresses/plan-review.html">
    <form class="form-horizontal">
      <div pf-form-group pf-label="Plan" pf-label-class="col-sm-2" pf-input-class="col-sm-10">
        <div ng-repeat="plan in valid_plans()">
          <div pf-form-group pf-label-class="col-sm-2" pf-input-class="col-sm-10" pf-label="{{plan.displayName}}">
            <input id="{{plan.name}}" name="plan" value="{{plan.name}}" ng-model="data.plan" type="radio"/>
            <input id="{{plan.displayName}}" name="plan_display_name" value="{{plan.displayName}}" ng-model="data.planDisplayName" type="hidden"/>
            <span title="" ng-if="plan.longDescription" tooltip-append-to-body="true" class="tip-block" tooltip-class="enmasse-tooltip" uib-tooltip-html="plan.longDescription">
              {{plan.shortDescription}}
            </span>
            <span ng-if="plan.longDescription === undefined">{{plan.shortDescription}}</span>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div ng-controller="SummaryController">
    <div pf-wizard-step step-title="Summary" substeps="false" step-id="review" step-priority="2" on-show="onShow">
      <div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
    </div>
  </div>
</div>
