<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'addon.messages.searchcombined' | translate }}</ion-title>
        <ion-buttons end>
            <!-- Add an empty context menu so discussion page can add items in split view, otherwise the menu disappears in some cases. -->
            <core-context-menu></core-context-menu>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<core-split-view>
    <ion-content>
        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"></core-search-box>
        <core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
            <ion-list *ngIf="displayResults">
                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>
                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}"></ng-container>
                <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}"></ng-container>
                <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
                <core-infinite-loading [enabled]="messages.canLoadMore" (action)="search(query, 'messages', $event)" [error]="messages.loadMoreError"></core-infinite-loading>
            </ion-list>

            <core-empty-box *ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length" icon="search" [message]="'core.noresults' | translate"></core-empty-box>
        </core-loading>
    </ion-content>
</core-split-view>

<!-- Template to render a list of results -->
<ng-template #resultsTemplate let-item="item">
    <ng-container *ngIf="item.results.length > 0">
        <ion-item-divider text-wrap>{{ item.titleString | translate }}</ion-item-divider>

        <!-- List of results -->
        <a ion-item text-wrap *ngFor="let result of item.results" [title]="result.fullname" (click)="openConversation(result)" [class.core-split-item-selected]="result == selectedResult" class="addon-message-discussion">
            <ion-avatar item-start core-user-avatar [user]="result" [checkOnline]="true" [linkProfile]="false"></ion-avatar>
            <h2>
                <core-format-text [text]="result.fullname" [highlight]="result.highlightName"></core-format-text>
                <core-icon name="fa-ban" *ngIf="result.isblocked" [label]="'addon.messages.contactblocked' | translate"></core-icon>
            </h2>
            <ion-note *ngIf="result.lastmessagedate > 0">
                {{result.lastmessagedate | coreDateDayOrTime}}
            </ion-note>
            <p class="addon-message-last-message">
                <span *ngIf="result.sentfromcurrentuser" class="addon-message-last-message-user">{{ 'addon.messages.you' | translate }}</span>
                <core-format-text clean="true" singleLine="true" [text]="result.lastmessage" [highlight]="result.highlightMessage" class="addon-message-last-message-text"></core-format-text>
            </p>
        </a>

        <!-- Load more button for contacts and non-contacts -->
        <ng-container *ngIf="item.type != 'messages'">
            <div padding-horizontal *ngIf="item.canLoadMore && !item.loadingMore">
                <button ion-button block color="light" (click)="search(query, item.type)">
                    {{ 'core.loadmore' | translate }}
                </button>
            </div>
            <div *ngIf="item.loadingMore" padding text-center>
                <ion-spinner></ion-spinner>
            </div>
        </ng-container>
    </ng-container>
</ng-template>