<div class="table-wrapper table-responsive">
  <table class="table table-condensed">
    <tr>
      <th ng-repeat="column in columns" class="obj-{{headers[column].obj}}">
        <div class="pull-right" ng-show="headers[column].attr.name!='name'">
          <a href ng-click="removeColumn(headers[column].level, headers[column].attr.name)"><i class="fa fa-times"></i></a>
        </div>
        <i class="fa fa-link" ng-show="headers[column].obj != 'entity'"></i>
        {{getLevelName(headers[column].level)}} {{headers[column].label}}
      </th>
      <th>
        <div class="btn-group" dropdown ng-show="availableColumns.length">
          <a href class="dropdown-toggle" ng-disabled="disabled">
            <i class="fa fa-plus-square"></i>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation" class="dropdown-header" ng-repeat-start="layer in availableColumns">
              {{getLevelName(layer.level)}} {{layer.label}}
            </li>
            <li ng-repeat="attr in layer.attributes">
              <a href ng-click="addColumn(layer.level, attr.name)">{{attr.label}}</a>
            </li>
            <li ng-show='!$last' ng-repeat-end class="divider"></li>
          </ul>
        </div>
      </th>
    </tr>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columns" class="obj-{{headers[column].obj}}">
        <a ng-show="headers[column].attr.name=='name'" href="#/p/{{project.slug}}/entities/{{row[column].id}}">
          {{row[column].value.value}}
        </a>
        <span ng-hide="headers[column].attr.name=='name'">{{row[column].value.value}}</span>
      </td>
      <td></td>
    </tr>
  </table>
</div>
