<div class="logs-view-element">
  <div class="manager-header" header-title="Usage Logs">
    <span id="logs-range" class="mini">
      <span class="date-line">
        <span class="date-line-caption">From</span>
        <input type="text" class="logs-date-picker input-sm" name="start" ng-model="options.logStartDate" data-max-date="{{ options.logEndDate }}" data-container="body" bs-datepicker/>
      </span>

      <span class="date-line">
        <span class="date-line-caption add-on">to</span>
        <input type="text" class="logs-date-picker input-sm" name="end" ng-model="options.logEndDate" data-min-date="{{ options.logStartDate }}" bs-datepicker/>
      </span>
    </span>
    <span class="hidden-xs 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>
    <div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
      <svg style="width: 800px; height: 500px;"></svg>
    </div>

    <div class="hidden-xs 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>

    <div class="table-container">
      <div class="cor-loader" ng-show="loading"></div>
      <table class="cor-table">
        <thead>
          <td>Description</td>
          <td style="min-width: 226px">Date/Time</td>
          <td>User/Token/App</td>
        </thead>

        <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>
      </table>
    </div>
  </div>
</div>