app.html

@{meta('Angular.js WebSocket Chat', 'description', 'keywords')}

<!-- /app/services/ -->
@{ngService('websocketService')}

<!-- /app/css/ -->
@{ngStyle('app')}

<!-- cdnjs -->
@{ngLocale('en-us')}

<!-- /app/controllers/ -->
@{ngController('home')}

<div ng-controller="HomeCtrl" class="content">

	<div class="users">
		<div class="form-description" style="margin-bottom:10px">Firstly you must type your username:</div>
		<form ng-submit="login()">
			<input type="text" ng-model="alias" placeholder="Type your name" ng-disabled="isLogged" style="width:180px" autofocus="autofocus" />
		</form>
		<div ng-show="isLogged">
			<button ng-click="logoff()" class="logoff">Logoff</button>
		</div>
		<br />
		<br />		
		<div ng-show="isLogged"><strong>Online users ({{ users.length }})</strong></div>
		<ul>
			<li ng-repeat="user in users">{{ user }}</li>
		</ul>
	</div>
	<div class="chat">
		<div ng-show="isLogged">
			<div class="form-description" style="margin-bottom:10px">Your message:</div>
			<form ng-submit="send()">
				<input type="text" ng-model="message" placeholder="Type your message ..." maxlength="100" ng-disabled="!isLogged" style="width:540px" />
			</form>
			<br />
			<br />
			<ul class="messages">
				<li ng-repeat="message in messages">
					<span>{{ message.date | date: 'yyyy-MM-dd HH:mm:ss' }} - {{ message.user }}</span>
					{{ message.message }}
				</li>
			</ul>
		</div>
	</div>

	<div class="cl">&nbsp;</div>

</div>

@{ngTemplate('list')}