<title>
    messenger
</title>
<!--
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-->
<link rel="stylesheet" href="/css/messengerStyle.css">
<!--
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Open Sans", sans-serif}
</style>
-->

<div class="w3-top" ng-init='getProfileImage();loadConnectionNT();getOldNotifications()'>
 <div class="w3-bar w3-theme-d2 w3-left-align w3-large">
  <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  <a href="#home" class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-margin-right"></i>friends</a>
  <a href="#feeds" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="feeds"><i class="fa fa-globe"></i></a>
  <a href="#home" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="home"><i class="fa fa-user"></i></a>

  <a href="#messenger" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="messenger"><i class="fa fa-envelope"></i></a>
  <div class="w3-dropdown-hover w3-hide-small">
    <button class="w3-button w3-padding-large" title="Notifications"><i class="fa fa-bell"></i><span class="w3-badge w3-right w3-small w3-green">{{oldNotificationsNum+notificationNum}}</span></button>     
    <div  class="w3-dropdown-content w3-card-4 w3-bar-block" style="width:300px">
        <span ng-click='removeNotification(notification._id)' class="w3-bar-item w3-button" ng-repeat='notification in notifications | orderBy:"-"'>{{notification.from}} {{notification.action}}s you<span ng-if='notification.action!="follow" && notification.action!="unfollow" && notification.action!="message"'>r post : {{notification.post}}</span> <hr></span>
        
        
        <span ng-click='removeNotification(notification._id)' class="w3-bar-item w3-button" ng-repeat='notification in oldNotifications | orderBy:"-"'>{{notification.from}} {{notification.action}}s you<span ng-if='notification.action!="follow" && notification.action!="unfollow" && notification.action!="message"'>r post : {{notification.post}}</span> <hr></span>
        
        

    </div>
      
  </div>
     

     
     
  
  
<div class="w3-dropdown-hover w3-right w3-padding-large">
    
<img  ng-src="{{i}}" class="w3-circle" style="height:25px;width:25px" alt="profile image">
  <div class="w3-dropdown-content w3-bar-block w3-border" style="right:0">
    <a href="#settings" class="w3-bar-item w3-button">settings</a>
    <a href="#" class="w3-bar-item w3-button" ng-click='signout()'>logout</a>
    
  </div>
</div>
  

  
  
  
 </div>
</div>
    <div class="emptyrow"></div>
    <div class="wrapper" ng-init='getUsers();loadConnectionCH()'>
        <div class="container">
            <div class="left">
                <div class="top">
                    <input ng-model='searchKey' placeholder='search' type="text" />
<!--                    <a href="javascript:;" class="search"></a>-->
                </div>
                <ul class="people" ng-repeat='user in users | filter : searchKey'>



                    <li ng-if="user.username!=username" ng-click='getselectedUser(user.username)' class="person" data-chat="person6">
                        <img style="margin-top: -10px !important" ng-src="{{user.profileImage}}" alt="" />
                        <span class="name">{{user.username}}</span>
                        
                    </li>
                    <br>
                </ul>
            </div>
            <div class="right">
                <div class="top"><span>To: <span class="name">{{selectedUser}}</span><span >{{isTypingNow}}</span></span>
                </div>
                <div ng-click='getchatUser(user.message)'class="chat">
                    <div class="conversation-start">
                    </div>
                     <div class="bubble you" >
                    
                    </div>
                    
<!--
                    <div class="bubble you">
                        Hello,
                    </div>
                    <div class="bubble you">
                        it's me.
                    </div>
                    <div class="bubble you">
                        I was wondering...
                    </div>
-->
                </div>
                <div class="chat" data-chat="person2" id='t' >
                    <div class="conversation-start">
                    </div>
                    
                       <div ng-repeat='message in oldMessages'>
                    <div class="bubble you"  ng-if='message.sender==selectedUser' >
                       {{message.message}}
                    </div>
                    <div class="bubble me" ng-if='message.reciever==selectedUser'>  {{message.message}}
                    </div>
                    </div>
                    
                    <div ng-repeat='message in messages'>
                    <div class="bubble you"  ng-if='message.reciever!=selectedUser' >
                       {{message.message}}
                    </div>
                    <div class="bubble me" ng-if='message.reciever==selectedUser' >  {{message.message}}
                    </div>
                    </div>
    
                 

                </div>

         
                <div class="write">
                    
                    <input type="text" placeholder="hit me a message" ng-model='message' ng-keypress="typing()" ng-blur="notTyping()">
                    
                    <a href="javascript:;" ng-click='sendMessage()' class="write-link send"  ></a>
                    
                </div>
            </div>
        </div>
    </div>