<GridLayout columns="*" rows="auto, auto, *, auto">

    <StackLayout>
        <GridLayout class="peek-nav-section"
                    rows="auto" columns="auto, *, auto">
            <WrapLayout class="btn-group"
                        row="0" col="0">
                <Button class="btn" text="<"
                        (tap)="navToChatsClicked()"></Button>
            </WrapLayout>
        </GridLayout>
        <StackLayout class="hr"></StackLayout>
    </StackLayout>

    <Label class="p"
           row="1"
           *ngIf="!haveMessages()"
           text="No messages"></Label>

    <ListView class="plugin-chat-messages"
              row="2"
              [items]="messages()" #messageListRef
              separatorColor="transparent">
        <ng-template let-i="index" let-msg="item" let-odd="odd" let-even="even">
            <StackLayout class="chat-messages-list"
                         [class.odd]="odd" [class.even]="even">
                <!-- Unread marker -->
                <Label *ngIf="isFirstUnreadMesage(i)"
                       class="hr-light"></Label>

                <!-- From and Date -->
                <Label class="chat-messages-details chat-messages-received"
                       *ngIf="!isMessageFromThisUser(msg)"
                       text="From {{userDisplayName(msg)}} ({{msg.fromUserId}}), {{timePast(msg)}} ago"></Label>

                <Label class="chat-messages-details chat-messages-sent"
                       *ngIf="isMessageFromThisUser(msg)"
                       text="{{timePast(msg)}} ago"></Label>

                <!-- Message -->
                <GridLayout columns="*, *, *" rows="auto">
                    <Label row="0" colspan="2"
                           class="chat-messages-contents"
                           [class.chat-messages-received]="!isMessageFromThisUser(msg)"
                           [class.chat-messages-sent]="isMessageFromThisUser(msg)"
                           [class.bg-success]="isNormalPriority(msg)"
                           [class.bg-danger]="isEmergencyPriority(msg)"
                           [col]="isMessageFromThisUser(msg) ? 0 : 1"
                           textWrap="true"
                           [text]="msg.message"></Label>

                </GridLayout>
            </StackLayout>
        </ng-template>
    </ListView>

    <GridLayout class="chat-messages-compose"
                row="3"
                rows="60"
                columns="*, auto">

        <TextView row="0" col="0"
                  class="chat-messages-new-text"
                  hint="Write your message here"
                  [(ngModel)]="newMessageText"></TextView>
        <GridLayout class="chat-messages-btn-group"
                    row="0" col="1"
                    rows="60"
                    columns="80">
            <Button class="chat-messages-btn"
                    row="0" col="0"
                    text="Send"
                    [isEnabled]="sendEnabled()"
                    (tap)="sendMsgClicked()"></Button>
            <!--<Button class="chat-messages-btn"-->
                    <!--row="0" col="1"-->
                    <!--text="SOS"-->
                    <!--(tap)="sendSosClicked()"></Button>-->

        </GridLayout>
    </GridLayout>
</GridLayout>