blob: 4d84f60b51a54dff26c8a44c487a74714e44316b [file] [log] [blame]
<link rel="import" href="../lib-elements/polymer-selector.html">
<link rel="import" href="../lib-elements/simple_router.html">
<link rel="import" href="td_input.html">
<link rel="import" href="td_item.html">
<polymer-element name="td-todos">
<template>
<link rel="stylesheet" href="td_todos.css">
<simple-router on-route="{{routeAction}}"></simple-router>
<section id="todoapp">
<header id="header">
<input is="td-input" id="new-todo" placeholder="What needs to be done?"
autofocus on-td-input-commit="{{addTodoAction}}"
on-td-input-cancel="{{cancelAddTodoAction}}">
</header>
<section id="main" hidden?="{{model.items.length == 0}}">
<input id="toggle-all" type="checkbox"
on-change="{{toggleAllCompletedAction}}"
checked="{{model.allCompleted}}">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" on-td-item-changed="{{itemChangedAction}}"
on-td-destroy-item="{{destroyItemAction}}">
<template repeat="{{model.filtered}}">
<li is="td-item" item="{{}}"></li>
</template>
</ul>
</section>
<footer id="footer" hidden?="{{model.items.length == 0}}">
<span id="todo-count"><strong>{{model.activeCount}}</strong>
{{model.activeItemWord}} left</span>
<polymer-selector id="filters" selected="{{activeRoute}}">
<li label="all">
<a href="{{baseUri}}#/">All</a>
</li>
<li label="active">
<a href="{{baseUri}}#/active">Active</a>
</li>
<li label="completed">
<a href="{{baseUri}}#/completed">Completed</a>
</li>
</polymer-selector>
<button hidden?="{{model.completedCount == 0}}" id="clear-completed"
on-click="{{clearCompletedAction}}">Clear completed
({{model.completedCount}})</button>
</footer>
</section>
</template>
<script type="application/dart" src="td_todos.dart"></script>
</polymer-element>