form-expansions.html

<p>Banned Civilizations: </p>
<uib-progressbar style="height: 25px;" class="progress-striped active" max="MaxBannable" value="CurrentlyBanned" type="{{BannedType}}">
    <span style="line-height: 20px;font-size: 20px;">{{CurrentlyBanned}}</span>
</uib-progressbar>
<uib-alert ng-show="showAlert" type="warning" style="text-align: center;">You have banned the maximum amount of civs!</uib-alert>
<form name="expansionForm">
    <div ng-form='expansionForm'>
        <div style="margin-bottom: 10px; text-align: center;">
            <a class="btn btn-info" ng-click="SelectOrUnselectExpansions(true)">Select all</a>
        </div>
    <span ng-repeat="expansion in expansions.expansion">
      <label class="checkbox" for="{{expansion}}">
          <input type="checkbox" value="{{expansion}}" ng-model="formData.selectedExpansions[$index]"
                 ng-change="UpdateCount(expansion,$index); $event.stopPropagation();" name="{{expansion}}"
                 id="{{expansion}}" checked/>
          {{expansion}}
      </label>
    </span>

        <div class="form-group row">
            <div class="col-xs-6 col-xs-offset-3">
                <a ui-sref="form.ban" class="btn btn-block btn-info" ng-click="ExpansionLogic()"
                   ng-disabled="!expansionForm.$valid">
                    Next <span class="glyphicon glyphicon-circle-arrow-right"></span>
                </a>
            </div>
        </div>
    </div>
</form>