<div class="header">
  <div class="title">
    <div class="submenu">
      <a href="javascript:history.back()" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a href="" ng-click="editOrCreate()" os-perms="core.can_manage_tags" class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
    </div>
    <h1 translate>Tags</h1>
  </div>
</div>

<div class="details">
  <div class="row form-group">
    <div class="col-sm-8">
      <div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" close="alert={}">
        {{ alert.msg }}
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" ng-model="filter.search" class="form-control"
          placeholder="{{ 'Filter' | translate}}">
    </div>
  </div>

  <table os-perms="core.can_manage_tags" 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>
    <tbody>
      <tr ng-repeat="tag in tags | filter: filter.search |
          orderBy: sortColumn:reverse">
        <td ng-mouseover="tag.hover=true" ng-mouseleave="tag.hover=false">
          <strong>{{ tag.name }}</strong>
          <div class="hoverActions" ng-class="{'hiddenDiv': !tag.hover}">
            <a href="" ng-click="editOrCreate(tag)" translate>Edit</a> &middot;
            <a href="" class="text-danger"
              ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
              <b>{{ tag.name }}</b>"
              ng-bootbox-confirm-action="delete(tag)" translate>Delete</a>
          </div>
  </table>
</div>
