| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | <title>TodoMVC</title> |
| 7 | <link rel="stylesheet" href="/static/base.css"> |
| 8 | <link rel="stylesheet" href="/static/index.css"> |
| 9 | <style>.js .nojs{display:none}.nojs{font-size:12px}.todo-list .nojs[data-action=edit]{position:absolute;right:60px;top:22px}.todo-list button.nojs{position:absolute;right:100px;top:20px}</style> |
| 10 | <script>document.documentElement.classList.add('js')</script> |
| 11 | <script type="module" src="/static/app.js"></script> |
| 12 | </head> |
| 13 | <body> |
| 14 | <section class="todoapp"> |
| 15 | <header class="header"> |
| 16 | <h1>todos</h1> |
| 17 | <form method="post" action="/todos"> |
| 18 | <input type="hidden" name="filter" value="{{.Filter}}"> |
| 19 | <input class="new-todo" name="title" placeholder="What needs to be done?" autofocus> |
| 20 | </form> |
| 21 | </header> |
| 22 | {{- if .Total}} |
| 23 | <section class="main"> |
| 24 | <form method="post" action="/todos/toggle-all"> |
| 25 | <input type="hidden" name="filter" value="{{.Filter}}"> |
| 26 | <input id="toggle-all" class="toggle-all" type="checkbox"{{if .AllDone}} checked{{end}}> |
| 27 | <label for="toggle-all">Mark all as complete</label> |
| 28 | <button class="nojs" data-action="toggle-all">Toggle all</button> |
| 29 | </form> |
| 30 | <ul class="todo-list"> |
| 31 | {{- range .Items}} |
| 32 | <li data-id="{{.ID}}"{{if or .Completed (eq .ID $.EditID)}} class="{{if .Completed}}completed{{end}}{{if and .Completed (eq .ID $.EditID)}} {{end}}{{if eq .ID $.EditID}}editing{{end}}"{{end}}> |
| 33 | <div class="view"> |
| 34 | <form method="post" action="/todos/{{.ID}}/toggle"> |
| 35 | <input type="hidden" name="filter" value="{{$.Filter}}"> |
| 36 | <input class="toggle" type="checkbox"{{if .Completed}} checked{{end}}> |
| 37 | <label>{{.Title}}</label> |
| 38 | <button class="nojs" data-action="toggle">Toggle</button> |
| 39 | </form> |
| 40 | <a class="nojs" data-action="edit" href="{{$.Path}}?edit={{.ID}}">Edit</a> |
| 41 | <form method="post" action="/todos/{{.ID}}/destroy"> |
| 42 | <input type="hidden" name="filter" value="{{$.Filter}}"> |
| 43 | <button class="destroy"></button> |
| 44 | </form> |
| 45 | </div> |
| 46 | <form method="post" action="/todos/{{.ID}}/edit"> |
| 47 | <input type="hidden" name="filter" value="{{$.Filter}}"> |
| 48 | <input class="edit" name="title" value="{{.Title}}"{{if eq .ID $.EditID}} autofocus{{end}}> |
| 49 | </form> |
| 50 | </li> |
| 51 | {{- end}} |
| 52 | </ul> |
| 53 | </section> |
| 54 | <footer class="footer"> |
| 55 | <span class="todo-count"><strong>{{.Left}}</strong> {{if eq .Left 1}}item{{else}}items{{end}} left</span> |
| 56 | <ul class="filters"> |
| 57 | <li> |
| 58 | <a{{if eq .Filter "all"}} class="selected"{{end}} href="/">All</a> |
| 59 | </li> |
| 60 | <li> |
| 61 | <a{{if eq .Filter "active"}} class="selected"{{end}} href="/active">Active</a> |
| 62 | </li> |
| 63 | <li> |
| 64 | <a{{if eq .Filter "completed"}} class="selected"{{end}} href="/completed">Completed</a> |
| 65 | </li> |
| 66 | </ul> |
| 67 | {{- if .Done}} |
| 68 | <form method="post" action="/todos/clear-completed"> |
| 69 | <input type="hidden" name="filter" value="{{.Filter}}"> |
| 70 | <button class="clear-completed">Clear completed</button> |
| 71 | </form> |
| 72 | {{- end}} |
| 73 | </footer> |
| 74 | {{- end}} |
| 75 | </section> |
| 76 | <footer class="info"> |
| 77 | <p>Double-click to edit a todo</p> |
| 78 | <p>Created by <a href="https://bakeoff.bfj.oncarlos.com">the CARLOS bakeoff</a> · Reference fixture</p> |
| 79 | <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> |
| 80 | </footer> |
| 81 | </body> |
| 82 | </html> |
| 83 | |
amadan