<!--TRANSITION WITH REASON DIALOG -->
<pl-chat-new-chat
    (cancel)="dialogCanceled()"
    (create)="dialogConfirmed($event)"
    *ngIf="isNewChatDialogShown()"
    [data]="newChatDialogData"
>
</pl-chat-new-chat>

<div *ngIf="!isNewChatDialogShown()" class="peek-nav-section">
    <!--
        The following 'div' groups button to the left of the Nav Bar.
        Can contain one to many buttons
    -->
    <div class="btn-group pull-right" role="group">
        <button (click)="newChatClicked()" class="nav-section-btn">
            <i nz-icon nzTheme="outline" nzType="plus"></i> New Chat
        </button>
    </div>
</div>
<div *ngIf="!isNewChatDialogShown()" class="peek-nav-bar-padding"></div>

<div class="plugin-chat-list">
    <!-- Use the template tag syntax, as this works with nativescript too -->
    <ng-template [ngForOf]="chats" let-chat let-i="index" ngFor>
        <div
            (click)="chatClicked(chat)"
            [class.bg-info]="!isChatRead(chat)"
            [class.bg-secondary]="isChatRead(chat)"
            class="chat-list-messages"
        >
            <!-- Unread indicator -->
            <i
                *ngIf="!isChatRead(chat)"
                nz-icon
                nzTheme="outline"
                nzType="comment"
            ></i>
            <div class="chat-list-group">
                <!-- Other Users -->
                <span
                    *ngFor="let user of otherChatUsers(chat)"
                    class="chat-list-title"
                >
                    {{userDisplayName(user)}} ({{user.userId}})
                </span>
            </div>
        </div>
    </ng-template>
</div>
