<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>Voting Card Sets</h2>
    <div class="pbm" ng-if="batchesTotals(['votingcardsets']).length > 0">
        <div class="status-box">
            <h3 class="md-title" translate>Ongoing processes</h3>
            <div class="status-row" ng-repeat="batchesTotal in batchesTotals(['votingcardsets'])">
                <div class="status-batch-title">
                    <i class="truncate" title="{{'Generating' | translate}}" ng-if="batchesTotal.type == 'votingcardsets'" translate>Generating</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="{{'Prepare' | translate}}"
                    id="prepare_vc_generation"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="vcGenerationPreparationEnabled() && tableFilter === 'LOCKED'"
                    ng-attr-title="{{getSelectVCSText()}}"
                    ng-click="generateExtendedAuthtenticationStructure()">
                <md-icon md-svg-src="assets/icons/ic_wrap_text_24px.svg" aria-label="{{'Prepare' | translate}}"></md-icon>
                <span class="hide-xs" translate>Prepare</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Precompute' | translate}}"
                    id="precompute"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="vcPrecomputationEnabled() && tableFilter === 'LOCKED'"
                    ng-attr-title="{{getSelectVCSText()}}"
                    ng-click="precomputeVotingCardSets()">
                <md-icon md-svg-src="assets/icons/ic_menu_24px.svg" aria-label="{{'Precompute' | translate}}"></md-icon>
                <span class="hide-xs" translate>Precompute</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Compute' | translate}}"
                    id="compute" ng-click="computeVotingCardSet()"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="vcComputationEnabled() && tableFilter === 'PRECOMPUTED'"
                    ng-attr-title="{{getSelectVCSText()}}">
                <md-icon md-svg-src="assets/icons/ic_list_24px.svg" aria-label="{{'Compute' | translate}}"></md-icon>
                <span class="hide-xs" translate>Compute</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Download' | translate}}"
                    id="download"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="vcDownloadEnabled() && tableFilter === 'COMPUTED'"
                    ng-attr-title="{{getSelectVCSText()}}"
                    ng-click="downloadVotingCardSet()">
                <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="{{'Generate' | translate}}"
                    id="generate"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="tableFilter === 'VCS_DOWNLOADED'"
                    ng-attr-title="{{getSelectVCSText()}}"
                    ng-click="generateVotingCardSet()">
                <md-icon md-svg-src="assets/icons/ic_wrap_text_24px.svg" aria-label="{{'Generate' | translate}}"></md-icon>
                <span class="hide-xs" translate>Generate</span>
            </md-button>
            <md-button class="md-primary md-raised"
                    aria-label="{{'Sign' | translate}}"
                    id="sign"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="tableFilter === 'GENERATED'"
                    ng-attr-title="{{getSelectVCSText()}}"
                    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="{{'Custom files' || translate}}"
                    id="generate_pre-voting_outputs"
                    ng-disabled="isThereNoVCSSelected()"
                    ng-if="generatePreVotingOutputsEnabled()"
                    ng-attr-title="{{getSelectVCSText()}}"
                    ng-click="generatePreVotingOutputs()">
                <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>
</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 Box'|translate}}" translate>Ballot Box</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" class="grow-2">
                    <span class="no-wrap" title="{{'Details'|translate}}" translate>Details</span>
                </th>
            </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="votingCardSet in data.votingCardSets.result | filter:customFilter:true as filteredRows">
                <td class="table-batchselector">
                    <md-checkbox aria-label="{{'Checkbox' | translate}}" class="md-datatable-theme md-primary" id="check_{{votingCardSet.id}}" data-ng-model="votingCardSet.selected" ng-change="updateSelectAll(votingCardSet.selected)"></md-checkbox>
                </td>
                <td class="grow-2">{{votingCardSet.defaultTitle}}</td>
                <td>{{votingCardSet.alias}}</td>
                <td>{{votingCardSet.ballotBoxAlias}}</td>
                <td>{{votingCardSet.ballotAlias}}</td>
                <td>
                    <span ng-if="votingCardSet.status=='LOCKED'" translate>To pre-compute</span>
                    <span ng-if="votingCardSet.status=='PRECOMPUTED'" translate>To compute</span>
                    <span ng-if="votingCardSet.status=='COMPUTING'" translate>Computing</span>
                    <span ng-if="votingCardSet.status=='COMPUTED'" translate>To download</span>
                    <span ng-if="votingCardSet.status=='VCS_DOWNLOADED'" translate>To generate</span>
                    <span ng-if="votingCardSet.status=='GENERATED'" translate>To sign</span>
                    <span ng-if="votingCardSet.status=='SIGNED'" translate>Done</span>
                </td>
                <td class="grow-2">
                    <div>
                        <span class="no-wrap" title="{{votingCardSet.details | translate}}">{{votingCardSet.details | translate}}</span>
                    </div>
                    <!-- if no ongoing process -->
                    <div data-ng-if="!progress(votingCardSet.id).processing">
                        <div data-ng-if="progress(votingCardSet.id).itemCount">
                            <span class="text-muted no-wrap" title="{{'Generated voting cards:'|translate}}" translate>Generated voting cards:</span>
                            <span>{{progress(votingCardSet.id).itemCount}}</span>
                        </div>
                        <div data-ng-if="progress(votingCardSet.id).errorCount">
                            <span class="text-muted text-danger no-wrap" title="{{'Errors:'|translate}}" translate>Errors:</span>
                            <span>{{progress(votingCardSet.id).errorCount}}</span>
                        </div>
                    </div>
                    <!-- if ongoing process -->
                    <div data-ng-if="progress(votingCardSet.id).queued">
                        <i class="fss no-wrap" title="{{'Queued...' | translate}}" translate>Queued...</i>
                    </div>
                    <div data-ng-if="votingCardSet.processing">
                        <i class="fss no-wrap" title="{{'Pre-computing...' | translate}}" data-ng-if="votingCardSet.status=='LOCKED'" translate>Pre-computing...</i>
                        <i class="fss no-wrap" title="{{'Computing...' | translate}}" data-ng-if="votingCardSet.status=='PRECOMPUTED'" translate>Computing...</i>
                        <i class="fss no-wrap" title="{{'Downloading...' | translate}}" data-ng-if="votingCardSet.status=='COMPUTED'" translate>Downloading...</i>
                    </div>
                    <div data-ng-if="progress(votingCardSet.id).processing">
                        <i class="fss no-wrap" title="{{'Generating...' | translate}}" data-ng-if="votingCardSet.status=='VCS_DOWNLOADED'" translate>Generating...</i>
                        <div class="progress-bar">
                            <span class="bar" style="width: {{progress(votingCardSet.id).pct}}%;"></span>
                            <span class="sr-only">{{progress(votingCardSet.id).pct}}%</span>
                        </div>
                    </div>
                    <div data-ng-if="progress(votingCardSet.id).processing && progress(votingCardSet.id).eta>0">
                        <span class="no-wrap" title="{{'Estimated time:'|translate}}" translate>Estimated time:</span>
                        <span class="no-wrap" title="{{ progress(votingCardSet.id).eta | elapsed }}">{{ progress(votingCardSet.id).eta | elapsed }}</span>
                    </div>
                    <div data-ng-if="progress(votingCardSet.id).processing && progress(votingCardSet.id).eta<0">
                        <span class="no-wrap" title="{{'Estimating time'|translate}}" translate>Estimating time</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
