<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="officejs_todomvc_manifest.json" rel="manifest">
    <title>OfficeJS TodoMVC App</title>
    <script src="rsvp.js"></script>
    <script src="renderjs.js"></script>
    <script src="handlebars.js"></script>
    <script src="officejs_todomvc_gadget_index.js"></script>
    <link href="officejs_todomvc.css" rel="stylesheet">
    <script class="handlebars-template" type="text/x-handlebars-template">
      <section class="todoapp">
        <header class="header">
          <h1>todos</h1>
          <form>
            <input class="new-todo" placeholder="What needs to be done?" autofocus>
          </form>
        </header>
        <section class="main {{#unless todo_exists}}hidden{{/unless}}">
          <input class="toggle-all" type="checkbox" {{#if all_completed}}checked="true"{{/if}}>
          <label for="toggle-all" class="toggle-label">Mark all as complete</label>
          <ul class="todo-list">
            {{#each todo_list}}
              <li class="todo-item {{#if this.completed}}completed{{/if}} {{#if this.editing}}editing{{/if}}"
                  data-jio-id="{{this.id}}">
                <div class="view {{#if this.edit}}hidden{{/if}}">
                  <input class="toggle" type="checkbox"{{#if this.completed}} checked="true"{{/if}}>
                  <label class="todo-label">{{this.title}}</label>
                  <button class="destroy"></button>
                </div>
                <input class="edit{{#unless this.editing}} hidden{{/unless}}">
              </li>
            {{/each}}
          </ul>
        </section>
        <footer class="footer {{#unless todo_exists}}hidden{{/unless}}">
          <span class="todo-count">{{todo_count}}</span>
          <div class="filters">
            <a href="#/" class="selected">All</a>
            <a href="#/active">Active</a>
            <a href="#/completed">Completed</a>
          </div>
          <button class="clear-completed">Clear completed</button>
        </footer>
      </section>
      <footer class="info">
        <p>Double-click to edit a todo</p>
        <p>Concept and themes from <a href="http://todomvc.com/">TodoMVC</a></p>
      </footer>
    </script>
  </head>
  <body>
    <div data-gadget-url="officejs_todomvc_gadget_model.html"
      data-gadget-scope="model"
      data-gadget-sandbox="public">
    </div>
    <main class="handlebars-anchor">
    </main>
  </body>
</html>