<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="assignments.assignment.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>All elections</translate>
      </a>
      <a ui-sref="assignments_single_pdf({pk: assignment.id})" target="_blank" class="btn btn-default btn-sm">
        <i class="fa fa-file-pdf-o fa-lg"></i>
        <translate>PDF</translate>
      </a>
      <!-- List of speakers -->
      <a ui-sref="agenda.item.detail({id: assignment.agenda_item_id})" class="btn btn-sm btn-default">
        <i class="fa fa-microphone fa-lg"></i>
        <translate>List of speakers</translate>
      </a>
      <!-- project -->
      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
          ng-class="{ 'btn-primary': assignment.isProjected() }"
          ng-click="assignment.project()"
          title="{{ 'Project election' | translate }}">
        <i class="fa fa-video-camera"></i>
      </a>
      <!-- edit -->
      <a os-perms="assignments.can_manage" ng-click="openDialog(assignment)"
          class="btn btn-default btn-sm"
          title="{{ 'Edit' | translate}}">
        <i class="fa fa-pencil"></i>
      </a>
    </div>
    <h1>{{ assignment.agenda_item.getTitle() }}</h1>
    <h2>
      <translate>Election</translate>
    </h2>
  </div>
</div>

<div class="meta">
  <div class="title" ng-click="isMeta = !isMeta">
    <div class="name">
      <i class="fa fa-info-circle"></i>
      <translate>Meta information</translate>
    </div>
    <div class="icon">
      <i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
    </div>
  </div>
  <div class="detail" uib-collapse="isMeta">
    <div class="row">
      <div class="col-md-6">
          <!-- posts -->
          <h3 translate>Number of posts to be elected</h3>
          {{ assignment.open_posts }}<br>
      </div>
      <div class="col-md-6">
          <!-- phase -->
          <h3 translate>Phase</h3>
          <span class="label" ng-class="{'label-primary': assignment.phase == 0,
                                         'label-warning': assignment.phase == 1,
                                         'label-success': assignment.phase == 2 }">
            {{ phases[assignment.phase].display_name | translate }}
          </span>
          <div os-perms="assignments.can_manage" class="spacer">
            <select ng-model="phaseSelect" class="form-control" ng-change="updatePhase(phaseSelect)">
              <option value="" translate>--- Set phase ---</option>
              <option ng-repeat="phase in phases" value="{{ phase.value }}">{{ phase.display_name }}</option>
            </select>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="details">
  <h3 translate>Description</h3>
  <div class="white-space-pre-line">{{ assignment.description }}</div>

  <h3 translate>Candidates</h3>
  <ol>
    <li ng-repeat="related_user in assignment.assignment_related_users">
      <a ui-sref="users.user.detail({id: related_user.user_id})">{{ related_user.user.get_full_name() }}</a>
      <i ng-if="related_user.elected" class="fa fa-star" title="{{ 'is elected' | translate }}"></i>
      <button os-perms="assignments.can_manage" ng-click="removeCandidate(related_user.user_id)"
          class="btn btn-default btn-xs">
        <i class="fa fa-times"></i>
      </button>
  </ol>

  <div class="form-group">
    <uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
      {{ alert.msg }}
    </uib-alert>
    <div os-perms="assignments.can_nominate_other" class="input-group">
      <ui-select ng-model="candidateSelectBox.selected" ng-change="addCandidate(candidateSelectBox.selected.id)">
        <ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
          {{ $select.selected.get_full_name() }}
        </ui-select-match>
        <ui-select-choices repeat="user in users | filter: $select.search | limitTo: limitUsers">
          <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
      <span class="input-group-btn">
        <a ng-click="candidateSelectBox={}" class="btn btn-default">
          <i class="fa fa-times-circle"></i>
        </a>
      </span>
    </div>
    <p os-perms="assignments.can_nominate_self">
      <button ng-if="!isCandidate()" ng-click="addMe()" class="btn btn-default">
        <i class="fa fa-plus"></i>
        <translate>Add me</translate>
      </button>
      <button ng-if="isCandidate()" ng-click="removeMe()" class="btn btn-default">
        <i class="fa fa-minus"></i>
        <translate>Remove me</translate>
      </button>
  </div>

  <h3 translate>Election result</h3>
  <button os-perms="assignments.can_manage" ng-click="createBallot()" class="btn btn-default btn-sm">
    <i class="fa fa-bar-chart fa-lg"></i>
    <translate>New ballot</translate>
  </button>

  <uib-tabset class="spacer">
    <uib-tab ng-repeat="poll in assignment.polls | orderBy:'-id'"
        heading="{{ 'Ballot' | translate }} {{ assignment.polls.length - $index }}">
      <div os-perms="assignments.can_manage" class="spacer">
        <!-- angular requires to open the link in new tab with "target='_blank'".
        Otherwise the pdf url can't be open in same window; angular redirects to "/". -->
        <a ui-sref="assignmentpoll_pdf({poll_pk: poll.id})" target="_blank"
            class="btn btn-default btn-sm">
          <i class="fa fa-file-pdf-o"></i>
          1. <translate>Print ballot paper</translate>
        </a>
        <i class="fa fa-arrow-right"></i>
        <button ng-click="editPollDialog(poll, $index+1)"
            class="btn btn-default btn-sm">
          <i class="fa fa-pencil"></i>
          2. <translate>Enter votes</translate>
        </button>
        <i class="fa fa-arrow-right"></i>
        <button ng-if="!poll.published" ng-click="publishBallot(poll, true)"
            class="btn btn-default btn-sm">
          <i class="fa fa-toggle-off"></i>
          3. <translate>Publish</translate>
        </button>
        <button ng-if="poll.published" ng-click="publishBallot(poll, false)"
            class="btn btn-default btn-sm">
          <i class="fa fa-toggle-on"></i>
          3. <translate>Published</translate>
        </button>
        <i class="fa fa-arrow-right"></i>
        <button os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
            ng-class="{ 'btn-primary': assignment.isProjected(poll.id) }"
            ng-click="assignment.project(poll.id)"
            title="{{ 'Project ballot' | translate }}">
          <i class="fa fa-video-camera"></i>
          4. <translate>Project</translate>
        </button>
        | <a class="btn btn-danger btn-sm"
            ng-bootbox-confirm="{{ 'Are you sure you want to delete this ballot?' | translate }}"
            ng-bootbox-confirm-action="deleteBallot(poll)">
          <i class="fa fa-times"></i>
          <translate>Delete</translate>
        </a>
      </div>
      <div class="results spacer">
        <table class="table table-bordered table-striped minimumTable">
        <tr>
          <th translate>Elected
          <th translate>Candidates
          <th ng-if="poll.has_votes" class="col-sm-6" translate>Votes</th>

        <!-- candidates (poll options) -->
        <tr ng-repeat="option in poll.options">

          <!-- elected -->
          <td class="minimum">
            <button os-perms="assignments.can_manage"
                ng-click="markElected(option.candidate_id, option.is_elected)" class="btn btn-default btn-xs">
              <i ng-if="option.is_elected" class="fa fa-star" title="{{ 'is elected' | translate }}"></i>
              <i ng-if="!option.is_elected" class="fa fa-star-o" title="{{ 'is not elected' | translate }}"></i>
            </button>

          <!-- candidate name -->
          <td>
            <a ui-sref="users.user.detail({id: option.candidate.id})">{{ option.candidate.get_full_name() }}</a>

          <!-- votes -->
          <td ng-if="poll.has_votes">
            <div ng-init="votes = option.getVotes()">
              <div ng-repeat="vote in votes">
                <span ng-if="poll.yesnoabstain">{{ vote.label }}:</span>
                {{ vote.value }} {{ vote.percentStr }}
                <div ng-if="vote.percentNumber">
                  <uib-progressbar value="vote.percentNumber" type="success"></uib-progressbar>
                </div>
              </div>
            </div>

        <!-- total votes (valid/invalid/casts) -->
        <tr>
          <td>
          <td>
            <translate>Valid votes</translate>
          <td ng-if="poll.has_votes" ng-init="vote = poll.getVote(poll.votesvalid)">
            {{ vote.value }} {{ vote.percent }}
        <tr>
          <td>
          <td>
            <translate>Invalid votes</translate>
          <td ng-if="poll.has_votes" ng-init="vote = poll.getVote(poll.votesinvalid)">
            {{ vote.value }}
        <tr class="total bg-info">
          <td>
          <td>
            <translate>Votes cast</translate>
          <td ng-if="poll.has_votes" ng-init="vote = poll.getVote(poll.votescast)">
            {{ vote.value }} {{ vote.percent }}
      </table>
      </div>
    </uib-tab>
  </uib-tabset>
</div>
