 <ion-view >
	<ion-nav-title>
      		<span class="title_line-height" ng-hide="swapChatScreen">Chat</span>
			<span class="title_line-height" ng-show="swapChatScreen">{{oppusername}}</span>
    </ion-nav-title>
	<ion-nav-buttons side="right"	>  
        <span class="icon chat chatLink" ng-show="swapChatScreen" ng-click="showChatList()"></span>
	</ion-nav-buttons>
	<ion-content ng-init="loadChatList()" scroll="false">
		<style>
		textarea {
			border-radius: 5px;
			box-shadow: -2px 2px 5px #cef6f5;
			float: left;
			height: 50px;
			margin: 0 5px 0 0;
			width: 70%;
		}
		.button.button-light {
			background: #fbbf3e none repeat scroll 0 0 !important;
			box-shadow: 0 4px 0 #dca227;
			color: #ffffff !important;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 3%;
			margin-top:0;
			width: 28%;
			border: none !important;
			height:45px;
		}
		#chatBody {
			min-height: 50%;
			position: relative;
		}
		#footer_chat {
			background: grey none repeat scroll 0 0;
			bottom: 0;
			left: 0;
			padding: 10px;
			position: absolute;
			right: 0;
		}
		.bar-footer.chat_footer{
			border-top: 1px solid #FFF;
			background-color:#6FBFFB !important;
			padding-bottom: 5px;
			height:60px;
		}
		.username{
			display: block;
			font-weight:bold;
			overflow: hidden;
		}
		.last_mess{
			height: 15px;
			overflow: hidden;
			width: 150px;
		}
		.chat_opponent_photo {
			margin-right:5px
		}
		.chat_opponent_photo > img{
			padding: 0px;
			width: 12%;
			float: left;
		}
		form{
		width:100% !important;
		}
		.chatContainer{
			overflow-y: scroll;
		}
		</style>
		
		
		<div class="popup-div-content" ng-hide="swapChatScreen">
			<div class="each-row-help" ng-repeat="chat_List in chatlist" ng-click="particularChat(chat_List.user_id,chat_List.username)">
				<div style="width:85%;float:left;">
					<div class="chat_opponent_photo"><img src="images/default-user-picture.png"/></div>
					<div class="username">{{chat_List.username}}</div>
					<div class="last_mess" >{{chat_List.last_text}}</div>
				</div>
				<div style="width:15%;float:left;">
				<div ng-if="chat_List.unread_count != 0">
					<div id="unreadMess" class="unreadMess" >{{chat_List.unread_count}}</div>
				</div>
				<div ng-if="chat_List.online_status == 'ONLINE'">
					<div id="online" class="online">{{chat_List.online_status}}</div>
				</div>
				</div>
				
			</div>
		</div>
		<div ng-show="swapChatScreen">
			<div id="chatBody" >
				<div scroll-glue class="chatContainer">
					<div ng-repeat="chat_response in chatResponse" class="clearContent">
						<div ng-if="chat_response.opp_turn == 0">
							<div class='chat-left'>
								<div class='tip-chart tip-chart-left'></div>
								<span>{{chat_response.message}}</span><br>
								<span>{{chat_response.date}}</span>
							</div>
						</div>
						<div ng-if="chat_response.opp_turn == 1" >
							<div class='chat-right'>
								<div class='tip-chart tip-chart-right'></div>
								<span>{{chat_response.message}}</span><br>
								<span>{{chat_response.date}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="bar bar-footer chat_footer" ng-show="swapChatScreen">
			<form name="chatForm" id="chatForm" method="post" ng-submit="SendChatMess()">
			<textarea rows='1' ng-model="chatMss" id="chatinput"></textarea>
			<!--<button class="button button-light" ng-click="SendChatMess(chatMss)">Send</button>-->
			<input type="submit" value="Send" class="button button-light"/>
			</form>
		</div>
	</ion-content>
	
</ion-view>




