<div class="well">
    <form>
        <div class="form-group">
            <label for="number_of_days"
                   class="col-sm-9 control-label"
                   translate>Run statistics for the last number of days...
            </label>
            <div class="col-sm-3">
                <input type="number"
                       class="form-control"
                       id="number_of_days"
                       name="number_of_days"
                       ng-model="params.days"/>
            </div>
        </div>

        <div class="form-group">
            <label for="stats_start"
                    translate>Statistics start time
            </label>
            <p class="input-group">
                <input type="text" class="form-control"
                       name="stats_start"
                       datepicker-popup="yyyy-MM-ddTHH:mmZ"
                       is-open="startOpened"
                       ng-model="params.start"
                       max-date="today"
                       show-button-bar="false"
                       close-text="Close"/>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default"
                        ng-click="startOpened = openDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </p>
        </div>

        <div class="form-group">
            <label for="stats_end"
                    translate>Statistics end time
            </label>
            <p class="input-group">
                <input type="text" class="form-control"
                       name="stats_end"
                       datepicker-popup="yyyy-MM-ddTHH:mmZ"
                       ng-model="params.end"
                       is-open="endOpened"
                       max-date="today"
                       show-button-bar="false"
                       close-text="Close"/>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default"
                        ng-click="endOpened = openDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </p>
        </div>

        <div class="text-center form-group">
            <button class="btn btn-default" ng-click="getStatistics()">
                <span class="glyphicon glyphicon-refresh"></span>
                <span translate>Refresh</span>
            </button>
        </div>
    </form>

    <h3 ng-show="stats.time_start" translate>Statistics from {{stats.time_start}} to {{ stats.time_end }}</h3>

    <accordion close-others="false">
        <accordion-group>
            <accordion-heading>
                <translate>Validate Requests per users</translate>
            </accordion-heading>
            <p class="help-block" translate>
                These are the validate-requests (authentication) grouped by
                users.
                The successful and the failed requests are listed.
            </p>
            <img width="700" ng-src="{{ stats.validate_user_plot }}"
                 alt="{{ stats.validate_user_plot }}"/>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <translate>Validate Requests per token</translate>
            </accordion-heading>
            <p class="help-block" translate>
                These are the validate-requests (authentication) grouped by the
                serial number of the token.
                The successful and the failed requests are listed.
            </p>
            <img width="700" ng-src="{{ stats.validate_serial_plot }}"
                 alt="{{ stats.validate_serial_plot }}"/>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <translate>Failed authentication requests per token</translate>
            </accordion-heading>
            <p class="help-block" translate>
                Failed authentication requests per token
            </p>
            <img width="700" ng-src="{{ stats.validate_failed_serial_plot }}"
                 alt="{{ stats.validate_failed_serial_plot }}"/>


            <table class="table table-hover">
                <tr>
                    <th translate>Serial</th><th translate>Count</th>
                </tr>
              <tr ng-repeat="v in stats.validate_failed_serial">
                <td><a ui-sref="token.details({tokenSerial:v.key})"
                       ng-click="$rootScope.returnTo=audit.stats;">{{ v.key}}</a>
                </td>
                <td>{{ v.count }}</td>
              </tr>
            </table>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <translate>Failed authentication requests per user</translate>
            </accordion-heading>
            <p class="help-block" translate>
                Failed authentication requests per user
            </p>
            <img width="700" ng-src="{{ stats.validate_failed_user_plot }}"
                 alt="{{ stats.validate_failed_user_plot }}"/>

            <table class="table table-hover">
                <tr>
                    <th translate>User</th><th translate>Count</th>
                </tr>
              <tr ng-repeat="v in stats.validate_failed_user">
                <td><a ui-sref="user.details({username:v.key})"
                       ng-click="$rootScope.returnTo=audit.stats;">{{ v.key }}</a>
                </td>
                <td>{{ v.count }}</td>
              </tr>
            </table>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <translate>Administrative actions</translate>
            </accordion-heading>
            <p class="help-block" translate>
                Which administrative request where the most popular.
            </p>
            <img width="700" ng-src="{{ stats.admin_plot }}"
                 alt="{{ stats.admin_plot }}"/>

            <table class="table table-hover">
                <tr>
                    <th translate>REST API Call</th><th translate>Count</th>
                </tr>
              <tr ng-repeat="c in stats.admin">
                <td>{{ c.key }}
                </td>
                <td>{{ c.count }}</td>
              </tr>
            </table>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <translate>Overall token usage</translate>
            </accordion-heading>
            <p class="help-block" translate>This is the overall token usage with
                any
                kind of action in regards to the serial number.</p>
            <img width="700" ng-src="{{ stats.serial_plot }}"
                 alt="{{ stats.serial_plot }}"/>

            <table class="table table-hover">
                <tr>
                    <th translate>Serial</th><th translate>Count</th>
                </tr>
                  <tr ng-repeat="s in stats.serial">
                <td><a ui-sref="token.details({tokenSerial:s.key})"
                       ng-click="$rootScope.returnTo=audit.stats;">
                    {{ s.key }}</a>
                </td>
                <td>{{ s.count }}</td>
              </tr>
            </table>
        </accordion-group>
    </accordion>
</div>
