<div class="peek-nav-section">
    <div class="btn-group pull-left" role="group">
        <button
            (click)="navToChatsClicked()"
            class="nav-section-btn"
            role="group"
        >
            <i nz-icon nzTheme="outline" nzType="left"></i>
        </button>
    </div>
</div>
<div class="peek-nav-bar-padding"></div>

<div #messageListRef class="plugin-chat-messages">
    <!-- No Messages -->
    <p *ngIf="!haveMessages()">No messages</p>

    <div *ngFor="let i=index; let msg of messages()" class="chat-messages-list">
        <!-- Unread marker -->
        <hr *ngIf="isFirstUnreadMesage(i)" />

        <!-- From and Date -->
        <div
            [class.text-right]="!isMessageFromThisUser(msg)"
            class="chat-messages-details"
        >
            <small *ngIf="!isMessageFromThisUser(msg)">
                From {{userDisplayName(msg)}} ({{msg.fromUserId}}),
                {{timePast(msg)}} ago
            </small>
            <small *ngIf="isMessageFromThisUser(msg)">
                {{timePast(msg)}} ago
            </small>
        </div>
        <div
            [class.bg-danger]="isEmergencyPriority(msg)"
            [class.bg-success]="isNormalPriority(msg)"
            [class.chat-messages-received]="!isMessageFromThisUser(msg)"
            [class.chat-messages-sent]="isMessageFromThisUser(msg)"
        >
            <div class="chat-messages-contents">{{msg.message}}</div>
        </div>
    </div>
</div>

<div class="container chat-messages-compose">
    <div class="row">
        <div class="col-xs-11">
            <textarea
                [(ngModel)]="newMessageText"
                class="form-control chat-messages-new-text"
            ></textarea>
        </div>
        <div class="col-xs-1">
            <div class="btn-group chat-messages-btn-group">
                <button
                    (click)="sendMsgClicked()"
                    [disabled]="!sendEnabled()"
                    class="chat-messages-btn"
                    type="button"
                >
                    Send
                </button>
                <!--<button class="chat-messages-btn" type="button"-->
                <!--(click)="sendSosClicked()">SOS-->
                <!--</button>-->
            </div>
        </div>
    </div>
</div>
