<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
        <ion-buttons end>
            <button *ngIf="loaded" ion-button icon-only (click)="showChatUsers()">
                <ion-icon name="people"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content  class="has-footer">
    <core-loading [hideUntil]="loaded">
        <div aria-live="polite">
            <div *ngFor="let message of messages; index as index; last as last">

                <div text-center *ngIf="showDate(messages[index], messages[index - 1])" class="addon-mod-chat-notice">
                    <ion-badge text-wrap color="light">
                        <span>{{ message.timestamp * 1000 | coreFormatDate:"dfdayweekmonth" }}</span>
                    </ion-badge>
                </div>

                <div text-center *ngIf="message.system && message.message == 'enter'" class="addon-mod-chat-notice">
                    <ion-badge text-wrap color="light">
                        <span>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }} {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}</span>
                    </ion-badge>
                </div>

                <div text-center *ngIf="message.system && message.message == 'exit'" class="addon-mod-chat-notice">
                    <ion-badge text-wrap color="light">
                        <span>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }} {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}</span>
                    </ion-badge>
                </div>

                <div text-center *ngIf="message.message == currentUserBeep" class="addon-mod-chat-notice">
                    <ion-badge text-wrap color="light">
                        <span>{{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}</span>
                    </ion-badge>
                </div>

                <ion-item text-wrap *ngIf="!message.system && message.message.substr(0, 4) != 'beep'" class="addon-mod-chat-message">
                    <ion-avatar item-start>
                        <img [src]="message.userprofileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: message.userfullname}" role="presentation">
                    </ion-avatar>
                    <h2>
                        <p float-end>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
                        <core-format-text [text]="message.userfullname"></core-format-text>
                    </h2>
                    <core-format-text [text]="message.message" (afterRender)="last && scrollToBottom()"></core-format-text>
                </ion-item>
            </div>

            <div text-center margin *ngIf="!messages || messages.length <= 0">
                <p>{{ 'addon.mod_chat.nomessages' | translate}}</p>
            </div>
        </div>
    </core-loading>
</ion-content>
<ion-footer color="light" class="footer-adjustable">
    <ion-toolbar color="light" position="bottom">
        <p text-center *ngIf="!isOnline">{{ 'addon.mod_chat.mustbeonlinetosendmessages' | translate }}</p>
        <core-send-message-form *ngIf="isOnline && polling && loaded" [message]="newMessage" (onSubmit)="sendMessage($event)" [showKeyboard]="showKeyboard" [placeholder]="'addon.messages.newmessage' | translate" (onResize)="resizeContent()"></core-send-message-form>
        <button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" ion-button block color="light">{{ 'core.login.reconnect' | translate }}</button>
    </ion-toolbar>
</ion-footer>
