<mat-card class="os-card" *osPerms="'users.can_manage'">
    <button type="button" mat-button (click)="countUsers()" *ngIf="!this.token">
        <span translate>Count active users</span>
    </button>
    <button type="button" mat-button (click)="stopCounting()" *ngIf="this.token">
        <span translate>Stop counting</span>
    </button>
    <div *ngIf="stats">
        <p>
            {{ userIds().length }} <span translate>active users</span>
            ({{ stats.usesIndexedDB }} <span translate>with indexedDB</span>,
            {{ stats.activeUserHandles-stats.usesIndexedDB }} <span translate>with local storage</span>)
            ({{ stats.activeUserHandles }} <span translate>connections</span>)
        </p>
        <h3 translate>Groups</h3>
        <ul>
            <li *ngFor="let groupId of groupIds()">
                <strong>{{ stats.groups[groupId].name }}</strong>:
                {{ userInGroupIds(groupId).length }} <span translate>active users</span>
                ({{ stats.groups[groupId].userHandleCount }} <span translate>connections</span>)
            </li>
        </ul>
    </div>
</mat-card>
