<div class="header">
  <div class="title">
    <div class="submenu">
      <a ng-click="openDialog()" os-perms="assignments.can_manage" class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <a ui-sref="core.tag.list" os-perms="core.can_manage_tags" class="btn btn-default btn-sm">
        <i class="fa fa-tags fa-lg"></i>
        <translate>Tags</translate>
      </a>
      <a ui-sref="assignments_pdf" target="_blank" class="btn btn-default btn-sm">
        <i class="fa fa-file-pdf-o fa-lg"></i>
        <translate>PDF</translate>
      </a>
    </div>
    <h1 translate>Elections</h1>
  </div>
</div>

<div class="details">
  <div class="row form-group">
    <div class="col-sm-6">
      <form class="form-inline">
        <!-- delete mode -->
        <button os-perms="assignments.can_manage" class="btn"
            ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
            ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
          <i class="fa fa-check-square-o"></i>
          <translate>Select ...</translate>
        </button>
      </form>
    </div>
    <div class="col-sm-6">
      <div class="form-inline text-right">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-search"></i></div>
            <input type="text" ng-model="filter.search" class="form-control"
               placeholder="{{ 'Search' | translate}}">
          </div>
        </div>
        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
            ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
          <i class="fa fa-filter"></i>
          <translate>Filter ...</translate>
        </button>
      </div>
    </div>
  </div>
  <div uib-collapse="!isFilterOpen" class="row">
    <div class="col-sm-6 text-right"></div>
    <div class="col-sm-6 text-right">
      <!-- phase filter -->
      <select ng-model="phaseFilter" class="form-control" id="phaseFilter">
        <option value="" translate>--- Select phase ---</option>
        <option ng-repeat="phase in phases" value="{{ phase.value }}">{{ phase.display_name }}</option>
      </select>
    </div>
  </div>
  <div uib-collapse="!isDeleteMode" class="row spacer">
    <div class="col-sm-12 text-left">
      <!-- delete button -->
      <a ng-show="isDeleteMode"
          os-perms="assignments.can_manage" ng-click="deleteMultiple()"
          class="btn btn-primary">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected elections</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic">
    {{ assignmentsFiltered.length }} /
    {{ assignments.length }} {{ "elections" | translate }}<span ng-if="(assignments|filter:{selected:true}).length > 0">,
    {{(assignments|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
  </div>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <!-- projector column -->
        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum">

        <!-- delete selection column -->
        <th ng-show="isDeleteMode" os-perms="assignments.can_manage" class="minimum deleteColumn">
          <input type="checkbox" ng-model="$parent.selectedAll" ng-change="checkAll()">

        <!-- agenda item column -->
        <th ng-click="toggleSort('agenda_item.item_number')" class="sortable">
          <translate translate-comment="short form of agenda item">Item</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'agenda_item.item_number' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>

        <!-- title column -->
        <th ng-click="toggleSort('title')" class="sortable">
          <translate>Title</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>

        <!-- candicates / posts column -->
        <th ng-click="toggleSort('open_posts')" class="sortable optional">
          <translate>Candidates</translate> &middot; <translate>Posts</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'open_posts' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>

        <!-- phase column -->
        <th ng-click="toggleSort('phase')" class="sortable optional">
          <translate>Phase</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'phase' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
    <tbody>
      <tr ng-repeat="assignment in assignmentsFiltered = (assignments | osFilter: filter.search : getFilterString |
          filter: {phase: phaseFilter} | orderBy: sortColumn:reverse)"
          class="animate-item"
          ng-class="{ 'activeline': assignment.isProjected(), 'selected': assignment.selected }">

        <!-- projector -->
        <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
          <a 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>

        <!-- delete selection -->
        <td ng-show="isDeleteMode" os-perms="assignments.can_manage" class="deleteColumn">
          <input type="checkbox" ng-model="assignment.selected">

        <!-- agenda item number -->
        <td ng-if="!assignment.quickEdit">
          {{ assignment.agenda_item.item_number }}

        <!-- title -->
        <td ng-if="!assignment.quickEdit" ng-mouseover="assignment.hover=true" ng-mouseleave="assignment.hover=false">
          <strong><a ui-sref="assignments.assignment.detail({id: assignment.id})">{{ assignment.title }}</a></strong>
          <div os-perms="assignments.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !assignment.hover}">
            <a href="" ng-click="openDialog(assignment)" translate>Edit</a> |
            <a href="" ng-click="assignment.quickEdit=true" translate>QuickEdit</a> |
            <a href="" class="text-danger"
                ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                <b>{{ assignment.title }}</b>"
                ng-bootbox-confirm-action="delete(assignment)" translate>Delete</a>
          </div>

        <!-- candidates / posts -->
        <td ng-if="!assignment.quickEdit" class="optional">
          <span class="badge">{{ assignment.assignment_related_users.length }}</span>
          /
          <span class="badge">{{ assignment.open_posts }}</span>

        <!-- phase -->
        <td ng-if="!assignment.quickEdit" class="optional">
          <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 }}
          </span>

        <!-- quickEdit columns -->
        <td ng-if="assignment.quickEdit" colspan="4">
          <h4>{{ assignment.title }} <span class="text-muted">&ndash; Quick Edit</span></h4>
            <uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
              {{ alert.msg }}
            </uib-alert>
            <div class="row">
              <div class="col-xs-6">
                <label for="inputTitle" translate>Title</label>
                <input type="text" ng-model="assignment.title" class="form-control input-sm" id="inputTitle">
              </div>
              <div class="col-xs-6">
                <label for="inputPosts" translate>Number of members to be elected</label>
                <input type="number" ng-model="assignment.open_posts" class="form-control input-sm" id="inputPosts">
              </div>
            </div>
            <div class="row">
              <div class="col-xs-6">
                <label for="selectPhase" translate>Phase</label>
                <select ng-options="phase.value as phase.display_name for phase in phases"
                    ng-model="assignment.phase" class="form-control" id="selectPhase">
                </select>
              </div>
              <div class="col-xs-6"></div>
            </div>
            <div class="spacer">
              <button ng-click="cancelQuickEdit(assignment)" class="btn btn-default pull-left" translate>
                Cancel
              </button> &nbsp;
              <button ng-click="save(assignment)" class="btn btn-primary" translate>
                Update
              </button>
              <a href="" ng-click="openDialog(assignment)"
                  class="pull-right" translate>Edit election ...</a>
            </div>
  </table>
</div>
