<tab-bar class="filter-status" filter-tabs="filterTabs" filter-active="filterActive" on-tab-selected="onTabSelected" filter-counter="statusCount"></tab-bar>

<div class="datatable-controls">
    <h2 class="sr-only" translate>Ballot Boxes</h2>
    <div class="pbm" ng-if="batchesTotals(['decryption']).length > 0">
        <div class="status-box">
            <h3 class="md-title" translate>Ongoing processes</h3>
            <div class="status-row" ng-repeat="batchesTotal in batchesTotals(['decryption'])">
                <div class="status-batch-title">
                    <i class="truncate" title="{{'Decrypting' | translate}}" ng-if="batchesTotal.type == 'decryption'" translate>Decrypting</i>
                    <span ng-if="batches(batchesTotal.type).length > 1">&nbsp;({{batchesTotal.processed}}/{{batchesTotal.total}})</span>
                    <span>:</span>
                </div>
                <div class="status-batches">
                    <div class="status-batch-item" ng-repeat="batch in batches(batchesTotal.type)">
                        <div>({{batch.processedItems}}/{{batch.totalItems}})</div>
                        <md-progress-linear md-mode="determinate" value="{{batch.completedPct}}"></md-progress-linear>
                        <i class="status-ongoing-progress-time truncate" title="{{batch.remainingMS | elapsed}}" md-caption>{{batch.remainingMS | elapsed}}</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="datatable-actions">
        <div class="datatable-actions-main">
            <md-button class="md-primary md-raised"
                    aria-label="{{'Sign' | translate}}"
                    id="sign"
                    ng-disabled="isThereNoBallotBoxSelected()"
                    ng-if="tableFilter === 'READY'"
                    ng-attr-title="{{getTextByBallotBoxSelected()}}"
                    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>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Download' | translate}}"
                    id="Download"
                    ng-disabled="isThereNoBallotBoxSelected()"
                    ng-if="tableFilter === 'MIXED'"
                    ng-attr-title="{{getTextByBallotBoxSelected()}}"
                    ng-click="downloadBallotBox()">
                <md-icon md-svg-src="assets/icons/ic_file_download_24px.svg" aria-label="{{'Download' | translate}}"></md-icon>
                <span class="hide-xs" translate>Download</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Decrypt' || translate}}"
                    id="Decrypt"
                    ng-disabled="isThereNoBallotBoxSelected()"
                    ng-if="tableFilter === 'BB_DOWNLOADED'"
                    ng-attr-title="{{getTextByBallotBoxSelected()}}"
                    ng-click="decrypt()">
                <md-icon md-svg-src="assets/icons/ic_lock_open_24px.svg" aria-label="{{'Decrypt' | translate}}"></md-icon>
                <span class="hide-xs" translate>Decrypt</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Tally' | translate}}"
                    id="Tally"
                    ng-disabled="isThereNoBallotBoxSelected()"
                    ng-if="tallyingEnabled() && tableFilter === 'DECRYPTED'"
                    ng-attr-title="{{getTextByBallotBoxSelected()}}"
                    ng-click="tally()">
                <md-icon md-svg-src="assets/icons/ic_calculator_24px.svg" aria-label="{{'Tally' | translate}}"></md-icon>
                <span class="hide-xs" translate>Tally</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Custom files' || translate}}"
                    id="generate_post-voting_outputs"
                    ng-disabled="isThereNoBBSelectedWithAppropiateStatus()"
                    ng-if="generatePostVotingOutputsEnabled() && ( tableFilter === 'BB_DOWNLOADED' || tableFilter === 'DECRYPTED' || tableFilter === 'TALLIED' )"
                    ng-attr-title="{{getTextByBallotBoxSelected()}}"
                    ng-click="generatePostVotingOutputs()">
                <md-icon md-svg-src="assets/icons/ic_file_download_24px.svg" aria-label="{{'Custom files' | translate}}"></md-icon>
                <span class="hide-xs" translate>Custom files</span>
            </md-button>
        </div>
        <div class="datatable-actions-auxiliary mbs">
            <div class="layout-row layout-align-start-center">
                <span class="md-caption hide-xs" translate>Ballot Boxes type:</span>
                <tab-bar class="filter-test" filter-tabs="filterTestTabs" filter-active="filterActiveTest" on-tab-selected="onTestSelected" filter-counter="typeCount"></tab-bar>
            </div>
        </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="filteredRows.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">
                    <span class="no-wrap" title="{{'Ballot'|translate}}" translate>Ballot</span>
                </th>
                <th scope="col">
                    <span class="no-wrap" title="{{'Next step'|translate}}" translate>Next step</span>
                </th>
                <th scope="col">
                    <span class="no-wrap" title="{{'Details'|translate}}" translate>Details</span>
                </th>
                <!-- <th scope="col" ng-if="tallyingEnabled()">
                    <span class="no-wrap" title="{{'Tally sheet'|translate}}" translate>Tally sheet</span>
                </th> -->
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="ballotBox in ballotBoxes.result | filter: { status: tableFilter, test: tableFilterTest } as filteredRows">
                <td class="table-batchselector">
                    <md-checkbox ng-model="ballotBox.selected" class="md-datatable-theme md-primary" aria-label="{{'Select' | translate}}" ng-change="updateSelectAll(ballotBox.selected)"></md-checkbox>
                </td>
                <td class="grow-2">{{ballotBox.defaultTitle}}</td>
                <td>{{ballotBox.alias}}</td>
                <td>{{ballotBox.ballotAlias}}</td>
                <td>
                    <span ng-if="ballotBox.status=='LOCKED'" translate>Pending to generate voting card sets</span>
                    <span ng-if="ballotBox.status=='READY'" translate>To sign</span>
                    <span ng-if="ballotBox.status=='SIGNED'" translate>To sync</span>
                    <span ng-if="ballotBox.status=='MIXED'" translate>To download</span>
                    <span ng-if="ballotBox.status=='BB_DOWNLOADED'" translate>To decrypt</span>
                    <span ng-if="ballotBox.status=='DECRYPTED'">
                        <span ng-if="tallyingEnabled()" translate>To tally</span>
                        <span ng-if="!tallyingEnabled()" translate>Done</span>
                    </span>
                    <span ng-if="ballotBox.status=='TALLIED'" translate>Done</span>
                </td>
                <td>
                    <div class="no-wrap" title="{{ballotBox.details | translate}}">{{ballotBox.details | translate}}</div>
                    <!-- if no ongoing process -->
                    <div data-ng-if="!progress(ballotBox.id).processing">
                        <div data-ng-if="ballotBox.status=='BB_DOWNLOADED'">
                            <div data-ng-if="progress(ballotBox.id).itemCount">
                                <span class="text-muted no-wrap" title="{{'Succesful votes:'|translate}}" translate>Succesful votes:</span>
                                <span>{{progress(ballotBox.id).itemCount}}</span>
                            </div>
                            <div data-ng-if="progress(ballotBox.id).itemCount2">
                                <span class="text-muted no-wrap" title="{{'Failed votes:'|translate}}" translate>Failed votes:</span>
                                <span>{{progress(ballotBox.id).itemCount2}}</span>
                            </div>
                            <div data-ng-if="progress(ballotBox.id).errorCount">
                                <span class="text-muted no-wrap text-danger" title="{{'Errors:'|translate}}" translate>Errors:</span>
                                <span>{{progress(ballotBox.id).errorCount}}</span>
                            </div>
                        </div>
                        <div data-ng-if="ballotBox.status=='DECRYPTED'">
                            <div data-ng-if="progress(ballotBox.id).itemCount">
                                <span class="text-muted no-wrap" title="{{'Auditable votes:'|translate}}" translate>Auditable votes:</span>
                                <span>{{progress(ballotBox.id).itemCount}}</span>
                            </div>
                            <div data-ng-if="progress(ballotBox.id).itemCount2">
                                <span class="text-muted no-wrap" title="{{'Ballots decrypted:'|translate}}" translate>Ballots decrypted:</span>
                                <span>{{progress(ballotBox.id).itemCount2}}</span>
                            </div>
                            <div data-ng-if="progress(ballotBox.id).errorCount">
                                <span class="text-muted no-wrap text-danger" title="{{'Errors:'|translate}}" translate>Errors:</span>
                                <span>{{progress(ballotBox.id).errorCount}}</span>
                            </div>
                        </div>
                        <div data-ng-if="ballotBox.status=='TALLIED'">
                            <div data-ng-if="progress(ballotBox.id).itemCount">
                                <span class="text-muted no-wrap" title="{{'Contests tallied:'|translate}}" translate>Contests tallied:</span>
                                <span>{{progress(ballotBox.id).itemCount}}</span>
                            </div>
                            <div data-ng-if="progress(ballotBox.id).errorCount">
                                <span class="text-muted no-wrap text-danger" title="{{'Errors:'|translate}}" translate>Errors:</span>
                                <span>{{progress(ballotBox.id).errorCount}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- if ongoing process -->
                    <div data-ng-if="progress(ballotBox.id).processing && progress(ballotBox.id).eta>0">
                        <span class="no-wrap" title="{{'Estimated time:'|translate}}" translate>Estimated time:</span>
                        <span class="no-wrap" title="{{ progress(ballotBox.id).eta | elapsed }}">{{ progress(ballotBox.id).eta | elapsed }}</span>
                    </div>
                    <div data-ng-if="progress(ballotBox.id).processing && progress(ballotBox.id).eta<0">
                        <span class="no-wrap" title="{{'Estimating time'|translate}}" translate>Estimating time</span>
                    </div>
                </td>
                <!-- <td ng-if="tallyingEnabled()">
                    <md-button ng-click="viewTallySheet(ballotBox.id,ballotBox.status)" class="md-datatable-theme md-primary md-link" ng-if="ballotBox.status=='TALLIED'">
                        <md-icon md-svg-src="assets/icons/ic_visibility_24px.svg" alt="View"></md-icon>
                        <span translate>View</span>
                    </md-button>
                </td> -->
            </tr>
        </tbody>
    </table>
</div>
