<div class="datatable-controls">
    <h2 class="sr-only" translate>Electoral Authorities</h2>
    <div class="datatable-actions">
        <div class="datatable-actions-main">
            <md-button ng-disabled="isThereNoElectoralAuthoritySelected()"
                ng-attr-title="{{getTextIsEASelected()}}"
                class="md-primary md-raised"
                aria-label="{{'Constitute' | translate}}"
                id="constitute"
                ng-click="constitute()">
                <md-icon md-svg-src="assets/icons/ic_person_24px.svg" aria-label="{{'Constitute' | translate}}"></md-icon>
                <span class="hide-xs" translate>Constitute</span>
            </md-button>
            <md-button ng-disabled="isThereNoElectoralAuthoritySelected()"
                ng-attr-title="{{getTextIsEASelected()}}"
                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"></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>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="authority in electoralAuthorities track by $index">
                <td class="table-batchselector">
                    <md-checkbox id="check_{{authority.id}}"
                        aria-label="{{'select' | translate}}"
                        ng-model="authority.selected"
                        ng-change="uniqueChoice(electoralAuthorities,authority)"
                        class="md-datatable-theme md-primary">
                    </md-checkbox>
                </td>
                <td class="grow-2"><md-button data-ng-click="showMembers(authority.id, $event)" class="link">{{authority.defaultTitle}}</md-button></td>
                <td>{{authority.alias}}</td>
                <td class="grow-3">{{authority.ballotBoxAlias | join}}</td>
                <td><span class="no-wrap" title="{{capitalizeFirstLetter(authority.status) | translate}}">{{capitalizeFirstLetter(authority.status) | translate}}</span></td>
                <td><span class="no-wrap" title="{{authority.details | translate}}">{{authority.details | translate}}</span></td>
            </tr>
        </tbody>
    </table>
</div>
