<html>
<head>
<title>Marrow</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/lib/jquery.formalize.min.js" type="text/javascript"></script>
<script src="/lib/knockout.js" type="text/javascript"></script>
<script src="/js/marrow/login.js" type="text/javascript"></script>
<script src="/js/models.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/main.css" media="screen" />
<link rel="stylesheet" href="/lib/formalize.css" media="screen" />
</head>
<body>
<div id="login_form">
<div class="message"></div>
<form data-bind="submit: login.login">
<input type="text" name="username" placeholder="Username" data-bind="value: login.username" />
<input type="text" name="password" placeholder="Password" data-bind="value: login.password" />
<button type="submit" >Log In</button>
<button data-bind="click: login.newuser">Add User</button>
</form>
</div>
<div class="container">
<section id="main">
<h2 data-bind='text: sectionTitle'></h2>
<ul data-bind='foreach: marrow'>
<li><a data-bind='attr:{href: url}, text: url'></a></li>
</ul>
<form data-bind="submit: addLink">
<input type="text" data-bind="value: newLink" placeholder="http:// . . ."/>
<button type="submit">+</button>
</form>
</section>
<section id="sidebar">
<h1>Marrow</h1>
<ul>
<li><a href="#" data-bind="click: gohome">Home</a></li>
<li><a href="#" data-bind="click: mylists">My Lists</a></li>
<li><a href="#" data-bind="click: random">Random</a></li>
<li><a href="/api/user/logout?to=/">Log Out</a></li>
</ul>
</section>
</div>
</body>
</html>