<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <title>D2::Ajax - v3</title>
  <script type="text/javascript" src="../public/javascripts/jquery.js"></script>
  <script type="text/javascript" src="../public/javascripts/jquery.tablesorter.min.js"></script>
  <script src="../public/javascripts/handlebars.min.js"></script>
  <script src="v3.js"></script>

  <link rel="stylesheet" href="../public/themes/blue/style.css" type="text/css" media="print, projection, screen" />

  <script id="show-items-template" type="text/x-handlebars-template">
    <div id="msg"></div>

    <form>
      <input name="text" id="text">
      <input type="submit" id="add-item" value="Add item">
    </form>

    {{#if data.items}}
        <table id="items-table" class="tablesorter">
          <thead>
          <tr><th>Item</th><th>Date</th><th>X</th></tr>
          </thead>
          <tbody>
          {{#each data.items}}
             <tr><td><a href="#id/{{ _id.$oid }}">{{ text }}</a></td><td class="date" sort="{{ date }}">{{ date }}</td><td><button class="delete" data-id="{{ _id.$oid }}">x</a></td></tr>
          {{/each}}
          </tbody>
        </table>
    {{/if}}
  </script>

  <script id="show-item-template" type="text/x-handlebars-template">
      <form id="update_form">
          <input name="text" id="text" value="{{ item.text }}"><br>
          <input name="id" id="id" type="hidden" value="{{ item._id.$oid }}">
          {{ item.date }}<br>
          <textarea name="details" id="details" cols="50" rows="10">{{item.details}}</textarea><br>
          <input type="submit" id="update-item" value="Update item">

      </form>
  </script>
</head>
<body>
<a href="#">home</a>

<div id="content"></div>

</body>
</html>
