<div class="logs-view-element">

  <div class="container header">
    <span class="header-text">
      <span ng-show="!performer">Usage Logs</span>
      <span class="entity-reference" name="performer.username" isrobot="performer.is_robot" ng-show="performer"></span>
      <span id="logs-range" class="mini">
        From
        <input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/>
        <span class="add-on">to</span>
        <input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/>
      </span>
    </span>
    <span class="right">
      <i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
         ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
      <a href="{{ logsPath }}" download="usage-log.json" target="_new">
        <i class="fa fa-download toggle-icon" data-title="Download Logs" bs-tooltip="tooltip.title"></i>
      </a>
    </span>
  </div>
  
  <div ng-show="loading">
    <div class="quay-spinner 3x"></div>
  </div>
  <div ng-show="!loading">    
    <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 style="min-width: 226px">Date/Time</th>
        <th>User/Token/App</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 class="log-description" ng-bind-html="getDescription(log)"></span>
          </td>
          <td>{{ log.datetime }}</td>
          <td>
            <span class="log-performer" ng-if="log.metadata.oauth_token_application">         
              <div>
                <span class="application-reference" data-title="log.metadata.oauth_token_application"
                      client-id="log.metadata.oauth_token_application_id"></span>
              </div>
              <div style="text-align: center; font-size: 12px; color: #aaa; padding: 4px;">on behalf of</div>
              <div>
                <span class="entity-reference" entity="log.performer" namespace="organization.name"></span>
              </div>
            </span>
            <span class="log-performer" ng-if="!log.metadata.oauth_token_application && log.performer">              
              <span class="entity-reference" entity="log.performer" namespace="organization.name"></span>
            </span>
            <span class="log-performer" ng-if="!log.performer && log.metadata.token">
              <i class="fa fa-key"></i>
              <span>{{ log.metadata.token }}</span>
            </span>
            <span ng-if="!log.performer && !log.metadata.token">
              (anonymous)
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>