| <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> |