<div class="row">
  <div class="col-md-12">
    <h2 class="featurette-heading">Roles
      <span class="text-muted"><small>Black Hat? Grey Hat? White Hat?</small></span></h2>
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="btn-group pull-right">
          <button ng-click="create()" class="btn btn-primary">Create</button>
        </div>
        <div class="btn-group">
          <button ng-model="showFilter" class="btn btn-default" uib-btn-checkbox
                  btn-checkbox-true="1"
                  btn-checkbox-false="0">Filter</button>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="table-responsive">
        <table ng-table="rolesTable" class="table table-striped" show-filter="showFilter" template-pagination="angular/pager.html">
          <tbody>
          <tr ng-repeat="role in $data track by $index">
            <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
              <ul class="list-unstyled">
                <li>{{ role.name }}</li>
                <li><span class="text-muted">{{ role.description }}</span></li>
              </ul>
            </td>
            <td data-title="''">
              <div class="btn-group-vertical pull-right">
                <button ng-click="edit(role.id)" class="btn btn-sm btn-info">
                  Edit
                </button>
                <a ng-click="remove(role)" confirm-click="Proceed to remove the role {{ role.name }}?"
                   class="btn btn-sm btn-danger">
                  Remove
                </a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
