<div class="datatable-controls">
    <h2 class="sr-only" translate>Ballots</h2>
    <div class="datatable-actions">
        <div class="datatable-actions-main">
            <md-button ng-disabled="isThereNoBallotSelected()"
                ng-attr-title="{{getTextIsBallotSelected()}}"
                class="md-primary md-raised"
                aria-label="{{'Sign' | translate}}"
                id="sign"
                ng-click="sign()">
                <md-icon md-svg-src="assets/icons/ic_vpn_key_24px.svg" aria-label="{{'Sign' | translate}}"></md-icon>
                <span class="hide-xs" translate>Sign</span>
            </md-button>
        </div>
    </div>
</div>

<div class="datatable-data">
    <table class="table">
        <thead>
            <tr>
                <td class="table-batchselector">
                    <md-checkbox aria-label="{{'Checkbox' | translate}}" class="md-datatable-theme md-primary" data-ng-model="selectAll" ng-change="onSelectAll(selectAll)" ng-disabled="ballots.result.length === 0"></md-checkbox>
                </td>
                <th scope="col" class="grow-2">
                    <span class="no-wrap" title="{{'Title'|translate}}" translate>Title</span>
                </th>
                <th scope="col">
                    <span class="no-wrap" title="{{'Alias'|translate}}" translate>Alias</span>
                </th>
                <th scope="col" class="grow-3">
                    <span class="no-wrap" title="{{'Ballot Boxes'|translate}}" translate>Ballot Boxes</span>
                </th>
                <th scope="col">
                    <span class="no-wrap" title="{{'Status'|translate}}" translate>Status</span>
                </th>
                <th scope="col">
                    <span class="no-wrap" title="{{'Details'|translate}}" translate>Details</span>
                </th>
                <th scope="col" class="table-action">
                     <span class="no-wrap" title="{{'Ballot'|translate}}" translate>Ballot</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="ballot in ballots.result track by $index">
                <td class="table-batchselector">
                    <md-checkbox aria-label="{{'Ballot Checkbox' | translate}}" ng-model="ballot.selected" class="md-datatable-theme md-primary" ng-change="updateSelectAll(ballot.selected)"></md-checkbox>
                </td>
                <td class="grow-2">{{ballot.defaultTitle}}</td>
                <td>{{ballot.alias}}</td>
                <td class="grow-3">{{ballot.ballotBoxes | sparse}}</td>
                <td><span class="no-wrap" title="{{capitalizeFirstLetter(ballot.status) | translate}}">{{capitalizeFirstLetter(ballot.status) | translate}}</span></td>
                <td><span class="no-wrap" title="{{ballot.details | translate}}">{{ballot.details | translate}}</span></td>
                <td class="table-action">
                    <md-button ng-click="viewBallot(ballot.id)" class="link">
                        <md-icon md-svg-src="assets/icons/ic_visibility_24px.svg" alt="View"></md-icon>
                        <span class="hide-xs" translate>View</span>
                    </md-button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
