<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.messages.messages' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
            <core-context-menu />
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-split-view>
        <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
        </ion-refresher>

        <core-search-box (onSubmit)="searchMessage($event)" (onClear)="clearSearch()" [placeholder]=" 'addon.messages.message' | translate"
            autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesDiscussions"
            [autoFocus]="false" />

        <core-loading [hideUntil]="loaded" [message]="loadingMessage">

            <ion-list class="ion-no-margin">

                <ion-item class="ion-text-wrap" (click)="gotoContacts()" [attr.aria-label]="'addon.messages.contacts' | translate"
                    [detail]="true" button>
                    <ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
                    <ion-label>
                        <p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
                    </ion-label>
                </ion-item>

                <ng-container *ngIf="search.showResults">
                    <ion-item-divider>
                        <ion-label>
                            <h2>{{ 'core.searchresults' | translate }}</h2>
                        </ion-label>
                        <ion-note slot="end" class="ion-padding-end">
                            <ion-badge>{{ search.results.length }}</ion-badge>
                        </ion-note>
                    </ion-item-divider>
                    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let result of search.results" button
                        [attr.aria-label]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)"
                        [attr.aria-current]="result.userid === discussionUserId ? 'page' : 'false'" [detail]="false">
                        <core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus" />
                        <ion-label>
                            <p class="item-heading">{{ result.fullname }}</p>
                            <p>
                                <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" contextLevel="system"
                                    [contextInstanceId]="0" />
                            </p>
                        </ion-label>
                    </ion-item>
                </ng-container>
                <ng-container *ngIf="!search.showResults">
                    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                        [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
                        [attr.aria-current]="discussion.message!.user === discussionUserId ? 'page' : 'false'" [detail]="false">
                        <core-user-avatar [user]="discussion" slot="start" checkOnline="false" />
                        <ion-label>
                            <div class="flex-row ion-justify-content-between">
                                <p class="item-heading">{{ discussion.fullname }}</p>
                                <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
                                    <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
                                        {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
                                    </span>
                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true" />
                                    <span *ngIf="discussion.unread" class="sr-only">
                                        {{ 'addon.messages.unreadmessages' | translate }}
                                    </span>
                                </ion-note>
                            </div>
                            <p>
                                <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message" contextLevel="system"
                                    [contextInstanceId]="0" />
                            </p>
                        </ion-label>
                    </ion-item>
                </ng-container>
            </ion-list>

            <core-empty-box *ngIf="(!discussions || discussions.length <= 0) && !search.showResults" icon="far-comments"
                [message]="'addon.messages.nomessagesfound' | translate" />

            <core-empty-box *ngIf="(!search.results || search.results.length <= 0) && search.showResults" icon="fas-magnifying-glass"
                [message]="'core.noresults' | translate" />
        </core-loading>
    </core-split-view>
</ion-content>
