<head>
  <title>Todos</title>
</head>

<body>
  <div id="top-tag-filter">
    {{> tag_filter}}
  </div>

  <div id="main-pane">
    {{> todos}}
  </div>

  <div id="side-pane">
    {{> lists}}
  </div>
</body>

<template name="lists">
  <h3>Todo Lists</h3>
  <div id="lists">
    {{#each lists}}
      {{> list_item}}
    {{/each}}
  </div>
  <div id="createList">
    <input type="text" id="new-list" placeholder="New list" />
  </div>
</template>

<template name="list_item">
  <div class="list {{selected}}">
    {{#if editing}}
      <div class="edit">
        <input class="list-name-input" id="list-name-input" type="text" value="{{name}}" />
      </div>
    {{else}}
      <div class="display">
        <div class="list-name {{name_class}}">
          {{name}}
        </div>
      </div>
    {{/if}}
  </div>
</template>

<template name="todos">
  {{#if any_list_selected}}
  <div id="items-view">
    <div id="new-todo-box">
      <input type="text" id="new-todo" placeholder="New item" />
    </div>
    <ul id="item-list">
      {{#each todos}}
        {{> todo_item}}
      {{/each}}
    </ul>
  </div>
  {{/if}}
</template>

<template name="todo_item">
  <li class="todo {{done_class}}">
    {{#if editing}}
      <div class="edit">
        <input id="todo-input" type="text" value="{{text}}" />
      </div>
    {{else}}
      <div class="destroy"></div>
      <div class="display">
        <input class="check" name="markdone" type="checkbox" {{{done_checkbox}}} />
        <div class="todo-text">{{text}}</div>
      </div>
    {{/if}}
    <div class="item-tags">
      {{#each tag_objs}}
        {{> todo_tag}}
      {{/each}}
      {{#if adding_tag}}
        <div class="tag edittag">
          <input type="text" id="edittag-input" value="" />
        </div>
      {{else}}
        <div class="tag addtag">
          +tag
        </div>
      {{/if}}
    </div>
  </li>
</template>

<template name="todo_tag">
  <div class="tag removable_tag">
    <div class="name">{{tag}}</div>
    <div class="remove"></div>
  </div>
</template>

<template name="tag_filter">
  <div id="tag-filter" class="tag-list">
    <div class="label">Show:</div>
    {{#each tags}}
      {{> tag_item}}
    {{/each}}
  </div>
</template>

<template name="tag_item">
  <div class="tag {{selected}}">
    {{tag_text}} <span class="count">({{count}})</span>
  </div>
</template>

