form-ban.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='banForm'>
    <div ng-form='banForm'>
        <div class="form-group">
            <div style="margin-bottom: 10px; text-align: center;">
                <a class="btn btn-danger" ng-click="ResetBanned()">Select none</a>
            </div>
            <table>
                <tr ng-repeat="rows in processedCivs">
                    <td ng-repeat="civ in rows" ng-click="AddOrRemoveFromBanArray(civ.nationName, $parent.$index * 5 + $index)"
                        ng-class="{'strike': Banned[$parent.$index * 5 + $index ], 'notStrike': !Banned[$parent.$index * 5 + $index]}">
                        <img src="images/{{civ.nationPicturePath}}" alt="{{civ.nationName}}" width="32"/>
                        {{civ.nationName}}
                    </td>
                </tr>
            </table>
        </div>

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