| 1 | {{define "index"}}{{template "head"}} <section class="todoapp">{{template "app" .}}</section> |
| 2 | {{template "foot"}}{{end}} |
| 3 | |
| 4 | {{/* app is section.todoapp's contents: the whole page body, and what |
| 5 | a fragment request gets back. Forms are display: contents (app.css), |
| 6 | so the markup lays out exactly as TodoMVC's template. */}} |
| 7 | {{define "app"}}{{$f := .Filter}} |
| 8 | <header class="header"> |
| 9 | <h1>todos</h1> |
| 10 | <form method="post" action="/todos"> |
| 11 | <input type="hidden" name="filter" value="{{$f}}"> |
| 12 | <input class="new-todo" name="title" placeholder="What needs to be done?" autocomplete="off"{{if not .Editing}} autofocus{{end}}> |
| 13 | </form> |
| 14 | </header> |
| 15 | {{- if .Total}} |
| 16 | <section class="main"> |
| 17 | <form method="post" action="/todos/toggle-all"> |
| 18 | <input type="hidden" name="filter" value="{{$f}}"> |
| 19 | <input id="toggle-all" class="toggle-all" type="checkbox"{{if .AllCompleted}} checked{{end}}> |
| 20 | <label for="toggle-all">Mark all as complete</label> |
| 21 | <button class="nojs toggle-all-submit" data-action="toggle-all"><span>Mark all as complete</span></button> |
| 22 | </form> |
| 23 | <ul class="todo-list"> |
| 24 | {{- range .Items}} |
| 25 | <li data-id="{{.ID}}"{{with .Class}} class="{{.}}"{{end}}> |
| 26 | <div class="view"> |
| 27 | <form method="post" action="/todos/{{.ID}}/toggle"> |
| 28 | <input type="hidden" name="filter" value="{{$f}}"> |
| 29 | <input class="toggle" type="checkbox"{{if .Completed}} checked{{end}}> |
| 30 | <label>{{.Title}}</label> |
| 31 | <button class="nojs toggle-submit" data-action="toggle"><span>Toggle</span></button> |
| 32 | </form> |
| 33 | <a class="nojs edit-link" data-action="edit" href="{{.EditHref}}"><span>Edit</span></a> |
| 34 | <form method="post" action="/todos/{{.ID}}/destroy"> |
| 35 | <input type="hidden" name="filter" value="{{$f}}"> |
| 36 | <button class="destroy"></button> |
| 37 | </form> |
| 38 | </div> |
| 39 | <form method="post" action="/todos/{{.ID}}/edit"> |
| 40 | <input type="hidden" name="filter" value="{{$f}}"> |
| 41 | <input class="edit" name="title" value="{{.Title}}"{{if .Editing}} autofocus{{end}}> |
| 42 | </form> |
| 43 | </li> |
| 44 | {{- end}} |
| 45 | </ul> |
| 46 | </section> |
| 47 | <footer class="footer"> |
| 48 | <span class="todo-count"><strong>{{.Left}}</strong> {{plural .Left}} left</span> |
| 49 | <ul class="filters"> |
| 50 | <li> |
| 51 | <a{{if eq $f "all"}} class="selected"{{end}} href="/">All</a> |
| 52 | </li> |
| 53 | <li> |
| 54 | <a{{if eq $f "active"}} class="selected"{{end}} href="/active">Active</a> |
| 55 | </li> |
| 56 | <li> |
| 57 | <a{{if eq $f "completed"}} class="selected"{{end}} href="/completed">Completed</a> |
| 58 | </li> |
| 59 | </ul> |
| 60 | {{- if .Completed}} |
| 61 | <form method="post" action="/todos/clear-completed"> |
| 62 | <input type="hidden" name="filter" value="{{$f}}"> |
| 63 | <button class="clear-completed">Clear completed</button> |
| 64 | </form> |
| 65 | {{- end}} |
| 66 | </footer> |
| 67 | {{- end}} |
| 68 | {{end}} |
| 69 | |
amadan