<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:cv="urn:import:com.google.gwt.user.cellview.client"
	xmlns:todo="urn:import:com.todo.client">
	<ui:style>
		.inline { display:inline; }
	</ui:style>
	<g:HTMLPanel>
		<section id="todoapp">
			<header id="header">
				<h1>todos</h1>
				<todo:TextBoxWithPlaceholder
					placeholder="What needs to be done?" ui:field="taskText">
				</todo:TextBoxWithPlaceholder>
			</header>

			<section ui:field="mainSection">
				<input ui:field="toggleAll" type="checkbox"></input>
				<label for="toggle-all">Mark all as complete</label>
				<div id="todo-list">
					<cv:CellList ui:field="todoTable"></cv:CellList>
				</div>
			</section>

			<footer ui:field="todoStatsContainer">
				<span id="todo-count">
					<strong class="number" ui:field="remainingTasksCount"></strong>
					<span class="word" ui:field="remainingTasksLabel"></span>
					left
				</span>
				<ul id="filters">
					<li>
						<g:Hyperlink targetHistoryToken="/" styleName="{style.inline}" ui:field="routingAll">All</g:Hyperlink>
					</li>
					<li>
						<g:Hyperlink targetHistoryToken="/active" styleName="{style.inline}" ui:field="routingActive">Active</g:Hyperlink>
					</li>
					<li>
						<g:Hyperlink targetHistoryToken="/completed" styleName="{style.inline}" ui:field="routingCompleted">Completed</g:Hyperlink>
					</li>
				</ul>
				<g:Button ui:field="clearCompleted"></g:Button>
			</footer>
		</section>

		<footer id="info">
			<p>Double-click to edit a todo</p>
			<p>Created by <a href="http://www.scottlogic.co.uk/blog/colin/">Colin Eberhardt</a></p>
			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>
	</g:HTMLPanel>
</ui:UiBinder>
