<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Meteor • TodoMVC</title>
</head>
<body>
	<section id="todoapp">
		{{> todoapp}}
	</section>
	<footer id="info">
		<p>Double-click to edit a todo</p>
		<p>Created by <a href="https://github.com/MStumpp">Matthias Stumpp</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
</body>

<template name="todoapp">
	<header id="header">
		<h1>todos</h1>
		<input id="new-todo" placeholder="What needs to be done?" autofocus>
	</header>
	{{#if todos}}
		{{> main}}
		{{> footer}}
	{{/if}}
</template>

<template name="main">
	<section id="main">
		<input id="toggle-all" type="checkbox" {{#unless todos_not_completed}}checked="checked"{{/unless}}>
		<label for="toggle-all">Mark all as complete</label>
		<ul id="todo-list">
			{{#each todos}}
				{{> todo}}
			{{/each}}
		</ul>
	</section>
</template>

<template name="todo">
	<li class="{{#if todo_completed}}completed{{/if}}{{#if todo_editing}}editing{{/if}}">
		<div class="view">
			<input class="toggle" type="checkbox" {{#if todo_completed}}checked="checked"{{/if}}>
			<label>{{title}}</label>
			<button class="destroy"></button>
		</div>
		<input class="edit" value="{{title}}">
	</li>
</template>

<template name="footer">
	<footer id="footer">
		<span id="todo-count"><strong>{{todos_not_completed}}</strong> 
			{{#if todos_one_not_completed}}item{{else}}items{{/if}} left</span>
		<ul id="filters">
					{{#each filters}}
						<li>
							<a class="{{#if filter_selected this}} selected {{/if}}" href="#/{{this}}">{{this}}</a>
						</li>
					{{/each}}
		</ul>
		{{#if todos_completed}}
			<button id="clear-completed">Clear completed ({{todos_completed}})</button>
		{{/if}}
	</footer>
</template>
