<ion-view title="{{ vm.currentChat.username}}">
    <ion-nav-buttons side="right">
        <button class="button button-clear"><img class="header-picture" ng-src="{{vm.currentChat.photo}}"></button>
    </ion-nav-buttons>
    <ion-content class="chat" delegate-handle="chatScroll">
        <div class="finder_results">
            <ion-spinner icon="ripple" ng-if="vm.loadingMessages"></ion-spinner>
        </div>
        <div class="message-list" ng-if="!vm.loadingMessages">
            <div ng-repeat="message in vm.messages | reverse" class="message-wrapper">
                <div class="message"ng-class="(message.user | parseInteger) === vm.currentChat.currentUser ? 'message-mine' : 'message-other'">
                    <div class="message-text" ng-if="message.text">{{message.text}}</div>
                    <div class="message-image" ng-if="message.image"><img ng-src="{{message.image || ''}}"/></div>
                    <span class="message-timestamp">{{message.datetime| date:'HH:mm'}}</span>
                </div>
            </div>
        </div>
    </ion-content>
    <ion-footer-bar keyboard-attach class="bar-assertive footer-chat item-input-inset">
        <button class="button button-clear button-icon icon ion-ios-camera-outline" ng-click="vm.makePhoto()"></button>
        <label class="item-input-wrapper">
            <input
                ng-model="vm.newMessage.text"
                on-return="vm.sendMessage()"
                on-focus="vm.inputUp()"
                on-blur="vm.inputDown()"
                dir="auto"
                type="text"/>
        </label>
        <span ng-if="vm.newMessage.text.length > 0">
            <button ng-click="vm.sendMessage()" class="button button-clear button-icon icon ion-paper-airplane"></button>
        </span>
    </ion-footer-bar>
</ion-view>