<h1 translate>Motions</h1>

<div id="submenu">
  <a ui-sref="motions.motion.create" os-perms="motions.can_manage" class="btn btn-primary btn-sm">
    <i class="fa fa-plus fa-lg"></i>
    <translate>New</translate>
  </a>
  <a ui-sref="motions.category.list" os-perms="motions.can_manage" class="btn btn-default btn-sm">
    <i class="fa fa-sitemap fa-lg"></i>
    <translate>Categories</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="motions_pdf" target="_blank" class="btn btn-default btn-sm">
    <i class="fa fa-file-pdf-o fa-lg"></i>
    <translate>PDF</translate>
  </a>
</div>

<div class="row form-group">
  <div class="col-sm-8">
    <!-- TODO: add filters -->
  </div>
  <div class="col-sm-4">
    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
        placeholder="{{ 'Filter' | translate}}">
  </div>
</div>

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <!-- TODO: Add motion.agenda_item to rest api -->
      <th ng-click="toggleSort('agenda_item')" class="sortable minimum">
        <translate>Agenda item</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'agenda_item' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('identifier')" class="sortable minimum">
        <translate>Identifier</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'identifier' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <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>
      <th ng-click="toggleSort('submitters')" class="sortable">
        <translate>Submitters</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'submitters' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th ng-click="toggleSort('category')" class="sortable">
        <translate>Category</translate>
        <i class="pull-right fa" ng-show="sortColumn === 'category' && header.sortable != false"
            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
        </i>
      <th os-perms="motions.can_manage core.can_manage_projector" class="minimum">
        <translate>Actions</translate>
  <tbody>
    <tr ng-repeat="motion in motions | filter: filter.search |
        orderBy: sortColumn:reverse" ng-class="{ 'activeline': motion.isProjected() }">
      <td> <!--TOOD: add agenda item reference -->
      <td><a ui-sref="motions.motion.detail({id: motion.id})">{{ motion.identifier }}</a>
      <td><a ui-sref="motions.motion.detail({id: motion.id})">
            <!-- TODO: make it easier to get active version -->
            {{ (motion.versions | filter: {id: motion.active_version})[0].title }}
          </a>
      <td class="optional">
        <div ng-repeat="submitter in motion.submitters">
          {{ (users | filter: {id: submitter})[0].get_full_name() }}<br>
        </div>
      <td class="optional">
        {{ (categories | filter: {id: motion.category})[0].name }}
      <td os-perms="motions.can_manage core.can_manage_projector" class="nobr">
        <!-- project -->
        <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm" 
            ng-class="{ 'btn-primary': motion.isProjected() }"
            ng-click="motion.project()"
            title="{{ 'Project motion' | translate }}">
          <i class="fa fa-video-camera"></i>
        </a>
        <!-- edit -->
        <a ui-sref="motions.motion.detail.update({id: motion.id })" os-perms="motions.can_manage"
            class="btn btn-default btn-sm"
            title="{{ 'Edit' | translate}}">
          <i class="fa fa-pencil"></i>
        </a>
        <!-- delete -->
        <a os-perms="motions.can_manage" class="btn btn-danger btn-sm"
            ng-bootbox-confirm="Are you sure you want to delete <b>{{ motion.getTitle() }}</b>?"
            ng-bootbox-confirm-action="delete(motion)"
            title="{{ 'Delete' | translate }}">
          <i class="fa fa-trash-o"></i>
        </a>
</table>
