<!doctype html>
<html>
	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<link rel="stylesheet" href="/css/bootstrap.css">
	<link rel="stylesheet" href="/css/style.css">

	</head>
	<body>

	<aside id="sidebar"></aside>
	<div id="chat"></div>

	<script type="text/html" id="networks">
	{{#networks}}
	<div class="network list-group" data-id="{{id}}">
		{{#channels}}
		<a href="" class="channel list-group-item" data-id="{{id}}">
			{{name}}
		</a>
		{{/channels}}
	</div>
	{{/networks}}
	</script>

	<script type="text/html" id="channels">
	{{#channels}}
	<div class="window {{type}}" data-id="{{id}}">
		<h1 class="title">{{name}}</h1>
		<div class="users">
			{{> users}}
		</div>
		<div class="messages">
			{{> messages}}
		</div>
		<form onSubmit="return false;">
			<input type="text" class="input" data-target="{{id}}"/>
			<input type="submit" style="display: none;"/>
		</form>
	</div>
	{{/channels}}
	</script>

	<script type="text/html" id="users">
	{{#users}}
	<div class="user">
		{{mode}}{{name}}
	</div>
	{{/users}}
	</script>

	<script type="text/html" id="messages">
	{{#messages}}
	<div class="message {{type}}">
		<span class="time">{{time}}</span>
		<span class="user">{{user}}</span>
		<span class="text">{{text}}</span>
	</div>
	{{/messages}}
	</script>

	<script src="/socket.io/socket.io.js"></script>
	<script src="/js/lib/mustache.min.js"></script>
	<script src="/js/lib/jquery-2.1.0.min.js"></script>
	<script src="/js/chat.js"></script>

	</body>
</html>