<sv-sidebar id="side-menu" title-long="'Secure Data Manager'" title-short="'SDM'"></sv-sidebar>

<main ng-cloak class="sv-main">

  <ov-toolbar class="sv-toolbar">

    <div ng-if="!isAdminAuthorityActivated()">
      <md-button class="md-raised md-secondary" 
        title="{{'Activate Admin Board' | translate}}"
        id="activate"
        ng-click="activateAdminBoard()">
        <md-icon md-svg-src="assets/icons/ic_admin_board.svg" alt="{{'Activate' | translate}}"></md-icon>
        <span class="hide-xs" translate>Activate Admin Board</span>
      </md-button>
    </div>

    <div ng-if="isAdminAuthorityActivated()">
      <md-button class="md-raised md-secondary" 
        title="{{'Deactivate Admin Board' | translate}}"
        id="deactivate"
        ng-click="deactivateAdminBoard()">
        <md-icon md-svg-src="assets/icons/ic_no_admin_board.svg" alt="{{'Deactivate' | translate}}"></md-icon>
        <span class="hide-xs" translate>Deactivate Admin Board</span>
      </md-button>
    </div>

    <div ng-click="synchronizeInTabs()">
      <md-button class="md-raised md-primary" 
        title="{{'Sync' | translate}}"
        id="synchronize">
        <md-icon ng-class="{'spin':isSync()}" md-svg-src="assets/icons/ic_autorenew_24px.svg" alt="{{'Sync' | translate}}"></md-icon>
        <span class="hide-xs" translate>Sync</span>
      </md-button>
    </div>

  </ov-toolbar>

  <div class="sv-content">

    <div ng-cloak class="sv-content-view" ui-view="ballots" ng-if="state == 'ballots'"></div>
    <div ng-cloak class="sv-content-view" ui-view="voting-cards" ng-if="state == 'voting-cards'"></div>
    <div ng-cloak class="sv-content-view" ui-view="electoral-authorities" ng-if="state == 'electoral-authorities'"></div>
    <div ng-cloak class="sv-content-view" ui-view="ballot-boxes" ng-if="state == 'ballot-boxes'"></div>

  </div>

</main>
