<div class="chat-bar" ng-controller="ChatMainCtrl" ng-cloak>
	<div class="chat-wrapper pull-right">
		<div ng-click="isCollapsed = !isCollapsed">
			<i class="fa fa-comment"></i> Online Chat
			<i class="pull-right" style="margin-top: 4px;" ng-class="{'fa fa-arrow-down': isCollapsed, 'fa fa-arrow-down': !isCollapsed}"></i>
		</div>

		<ul class="chat-users" collapse="isCollapsed">
			<li ng-repeat="user in users" ng-click="openTab(user)"><i class="fa fa-fix-width fa fa-circle text-success" style="font-size: 10px"></i> {[{ user.name }]}</li>
		</ul>
	</div>

	<div ng-repeat="user in openTabs">
		<div class="chat-tab pull-right" ng-class="{open: !user.minimized}" chat-tab data-user="user" data-close-tab="closeTab(tab)">
			<span class="chat-name" ng-show="user.minimized" ng-click="user.minimized = false;"><i class="fa fa-fix-width fa fa-circle text-success" style="font-size: 10px"></i> Dan <button class="close pull-right" ng-click="closeTab({tab: user})">&times;</button></span>
			<div class="chat-content" ng-hide="user.minimized">
				<div class="chat-content-header">
					Dan <button class="close pull-right" ng-click="closeTab({tab: user})">&times;</button> &nbsp; <button class="close pull-right" ng-click="user.minimized = true;">_</button>
				</div>
				<div class="chat-messages">

					<small class="muted" ng-hide="messages.length > 0">No messages.</small>

					<div class="chat-message-wrapper" ng-repeat="message in messages | orderBy:'id'">
						<div class="chat-message-info">
							<strong class="chat-message-user">{[{ message.own ? 'Me' : message.from.name }]}</strong> <small class="muted pull-right">{[{ message.created_at | fromNow }]}</small>
						</div>
						<span class="chat-message">{[{ message.message }]}</span>
					</div>
				</div>
				<div class="chat-actions">
					<textarea rows="2" placeholder="Type a new message" ng-model="message" ui-keydown="{13: 'send()'}" required></textarea>
				</div>
			</div>
		</div>
	</div>
</div>