<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_chat.currentusers' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="usersLoaded">
        <ion-item class="ion-text-wrap" *ngFor="let user of users" [class.addon-mod-chat-user]="currentUserId !== user.id && isOnline">

            <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
            <ion-label>
                <p class="item-heading">{{ user.fullname }}</p>
                <ng-container *ngIf="currentUserId !== user.id && isOnline">
                    <ion-button fill="clear" (click)="talkTo(user)">
                        <ion-icon name="fas-comments" slot="start" aria-hidden="true"></ion-icon>
                        {{ 'addon.mod_chat.talk' | translate }}
                    </ion-button>
                    <ion-button fill="clear" (click)="beepTo(user)">
                        <ion-icon name="fas-bell" slot="start" aria-hidden="true"></ion-icon>
                        {{ 'addon.mod_chat.beep' | translate }}
                    </ion-button>
                </ng-container>
            </ion-label>
        </ion-item>
    </core-loading>
</ion-content>