<div class="container">
    <div class="row chat-window col-xs-5 col-md-3" id="chat_window_1" style="margin-left:10px;">
        <div class="col-xs-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading top-bar">
                    <div class="col-md-8 col-xs-8">
                        <h3 class="panel-title"><span class="fa fa-comment"></span> Chat -
                            {{vm.chattingWith.display_name}}</h3>
                    </div>
                    <div class="col-md-4 col-xs-4" style="text-align: right;">
                        <a href="#"><span id="minim_chat_window" class="fa fa-minus icon_minim"></span></a>
                        <a href="#"><span class="fa fa-remove icon_close" data-id="chat_window_1"
                                          ng-click="closeChat()"></span></a>
                    </div>
                </div>
                <div class="panel-body msg_container_base">
                    <div class="row msg_container" ng-repeat="message in vm.messages"
                         ng-class="$root.currentUser.slug === message.from_user.slug ? 'base_sent' : 'base_receive'">
                        <div class="col-md-2 col-xs-2 avatar"
                             ng-show="$root.currentUser.slug === message.from_user.slug">
                            <img ng-src="{{message.from_user.profile_image_medium}}"
                                 class="img-responsive">
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <div class="messages"
                                 ng-class="$root.currentUser.slug === message.from_user.slug ? 'msg_sent' : 'msg_receive'">
                                <p>{{message.body}}</p>
                                <time datetime="{{message.sent_at}}">
                                    {{message.from_user.display_name}} • {{message.sent_at|humanise}}
                                </time>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-2 avatar"
                             ng-hide="$root.currentUser.slug === message.from_user.slug">
                            <img ng-src="{{message.from_user.profile_image_medium}}"
                                 class="img-responsive">
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <form ng-submit="sendMessage()">
                        <div class="input-group">
                            <input id="btn-input" type="text" class="form-control input-sm chat_input"
                                   ng-model="message" placeholder="Write your message here..."/>
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary btn-sm" id="btn-chat">Send</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
