<div class="logs-view-element">
  <div ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-3x"></i>
  </div>
  <div ng-show="!loading">
    <div class="container header">
      <b>Usage logs for the last seven days</b>
      <span class="right">
        <button class="btn btn-default btn-toggle" ng-class="chartVisible ? 'active' : ''" ng-click="toggleChart()">
          Show Chart
          <i class="fa" ng-class="chartVisible ? 'fa-toggle-down' : 'fa-toggle-right'" style="margin-left: 10px"></i>
        </button>
      </span>
    </div>

    <div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
      <svg style="width: 800px; height: 500px;"></svg>
    </div>

    <div class="side-controls">      
      <div class="result-count">
        Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
        {{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
      </div>
      <div class="filter-input">        
        <input id="log-filter" class="form-control" placeholder="Filter Logs" type="text" ng-model="search.$">
      </div>
    </div> 

    <table class="table">
      <thead>
        <th>Description</th>
        <th>Date/Time</th>
        <th>User/Token</th>
      </thead>
           
      <tbody>
        <tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
          <td>
            <span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
            <span ng-bind-html="getDescription(log)"></span>
          </td>
          <td>{{ log.datetime }}</td>
          <td>
            <span ng-show="log.performer">              
              <span class="entity-reference" name="log.performer.username" isrobot="log.performer.is_robot"></span>
            </span>
            <span ng-show="!log.performer && log.metadata.token">
              <i class="fa fa-key"></i>
              <span>{{ log.metadata.token }}</span>
            </span>
            <span ng-show="!log.performer && !log.metadata.token">
              (anonymous)
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>