<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a href="" os-perms="motions.can_manage" class="btn btn-primary btn-sm" ng-click="editOrCreate()">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
    </div>
    <h1 translate>Categories</h1>
  </div>
</div>

<div class="details">
  <div class="row form-group">
    <div class="col-sm-4 pull-right">
      <input type="text" ng-model="filter.search" class="form-control"
          placeholder="{{ 'Filter' | translate }}">
    </div>
  </div>

  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th ng-click="toggleSort('name')" class="sortable">
          <translate>Name</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'name' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
        <th ng-click="toggleSort('prefix')" class="sortable">
          <translate>Prefix</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'prefix' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
    <tbody>
      <tr ng-repeat="category in categories | filter: filter.search | orderBy: sortColumn:reverse">
        <td ng-mouseover="category.hover=true" ng-mouseleave="category.hover=false">
          <strong>{{ category.name }}</strong>
          <div class="hoverActions" ng-class="{'hiddenDiv': !category.hover}">
            <!-- sort -->
            <a ui-sref="motions.category.sort({ id: category.id })" translate>Sort</a> |
            <!-- edit -->
            <a href="" ng-click="editOrCreate(category)" translate>Edit</a> |
            <!-- delete -->
            <a href="" class="text-danger"
              ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                <b>{{ category.name }}</b>"
              ng-bootbox-confirm-action="delete(category)" translate>Delete</a>
          </div>
        <td>{{ category.prefix }}
  </table>
</div>
