({ "Action": { "id": { "type": "INTEGER"},
    "createdAt": { "type": "DATETIME"},
    "lockVersion": { "type": "INTEGER"},
    "name": { "type": "VARCHAR(200)"},
    "notes": { "type": "TEXT"},
    "contextId": { "type": "INTEGER"},
    "projectId": { "type": "INTEGER"},
    "activeAt": { "type": "DATETIME"},
    "repeat": { "type": "VARCHAR(50)"},
    "dueAt": { "type": "DATETIME"},
    "completedAt": { "type": "DATETIME"},
    "position": { "type": "INTEGER"},
    "color": { "type": "VARCHAR(15)"}},
"Context": { "id": { "type": "INTEGER"},
    "createdAt": { "type": "DATETIME"},
    "lockVersion": { "type": "INTEGER"},
    "name": { "type": "VARCHAR(200)"},
    "notes": { "type": "TEXT"},
    "parentContextId": { "type": "INTEGER"},
    "color": { "type": "VARCHAR(15)"}},
"Project": { "id": { "type": "INTEGER"},
    "createdAt": { "type": "DATETIME"},
    "lockVersion": { "type": "INTEGER"},
    "name": { "type": "VARCHAR(200)"},
    "notes": { "type": "TEXT"},
    "dueAt": { "type": "DATETIME"},
    "completedAt": { "type": "DATETIME"},
    "color": { "type": "VARCHAR(15)"}},
"Preference": { "id": { "type": "INTEGER"},
    "createdAt": { "type": "DATETIME"},
    "lockVersion": { "type": "INTEGER"},
    "name": { "type": "VARCHAR(200)"},
    "value": { "type": "TEXT"}}
})

({"Action":[{"dueAt":null,"name":"milk","lockVersion":4,"notes":"","id":1,"createdAt":"2005/07/10 05:19:57 UTC","completedAt":null,"projectId":null,"contextId":4},{"name":"return videos","dueAt":null,"lockVersion":2,"createdAt":"2005/07/10 05:21:17 UTC","id":2,"notes":"","completedAt":null,"projectId":null,"contextId":4},{"dueAt":null,"name":"dr appointment","lockVersion":30,"activeAt":"2005/07/25 05:00:00 UTC","notes":"","id":3,"createdAt":"2005/07/10 05:21:50 UTC","color":"red","completedAt":null,"projectId":null,"contextId":10},{"name":"coffee","lockVersion":1,"createdAt":"2005/07/10 05:26:08 UTC","id":4,"projectId":null,"contextId":4},{"name":"paint","lockVersion":1,"id":5,"createdAt":"2005/07/10 05:26:35 UTC","projectId":null,"contextId":16},{"name":"light bulbs","lockVersion":3,"createdAt":"2005/07/10 05:26:57 UTC","id":6,"completedAt":null,"projectId":null,"contextId":16},{"name":"toilet paper","lockVersion":4,"id":7,"createdAt":"2005/07/10 05:27:34 UTC","completedAt":"2005/07/13 21:25:37 UTC","projectId":null,"contextId":2},{"dueAt":null,"name":"fertilize lawn","lockVersion":10,"activeAt":null,"notes":"","repeat":"y:5:1","createdAt":"2005/07/10 05:27:45 UTC","id":8,"color":"","completedAt":null,"projectId":null,"contextId":17},{"dueAt":null,"name":"buy tickets","lockVersion":23,"activeAt":"2005/07/25 05:00:00 UTC","notes":"","id":9,"createdAt":"2005/07/10 05:57:45 UTC","color":"red","completedAt":null,"projectId":1,"contextId":10},{"dueAt":null,"name":"renew passport","lockVersion":11,"activeAt":null,"id":10,"createdAt":"2005/07/10 06:02:53 UTC","completedAt":null,"projectId":null,"contextId":10},{"dueAt":null,"name":"project walkabout","lockVersion":7,"notes":"","id":11,"createdAt":"2005/07/10 20:57:49 UTC","completedAt":null,"projectId":null,"contextId":9},{"name":"add some actions","lockVersion":2,"createdAt":"2005/07/10 21:07:45 UTC","id":12,"completedAt":"2005/07/10 21:10:05 UTC","projectId":null,"contextId":null},{"name":"vision stmt","lockVersion":3,"id":13,"createdAt":"2005/07/10 21:08:14 UTC","completedAt":null,"projectId":null,"contextId":9},{"name":"shopping idea","lockVersion":2,"createdAt":"2005/07/10 21:08:42 UTC","id":14,"completedAt":"2005/07/10 21:08:47 UTC","projectId":null,"contextId":9},{"name":"triplestores","dueAt":null,"lockVersion":2,"notes":"","createdAt":"2005/07/10 21:09:44 UTC","id":15,"completedAt":null,"projectId":null,"contextId":12},{"dueAt":null,"name":"vacuum","lockVersion":3,"activeAt":null,"notes":"","createdAt":"2005/07/10 21:12:43 UTC","id":16,"repeat":"a:14","color":"","completedAt":null,"projectId":2,"contextId":17},{"dueAt":null,"name":"research roomba","lockVersion":4,"activeAt":"2005/07/18 07:00:00 UTC","notes":"","id":17,"createdAt":"2005/07/10 21:13:18 UTC","color":"","completedAt":null,"projectId":null,"contextId":13},{"name":"idea brainstorm","dueAt":null,"lockVersion":21,"activeAt":null,"createdAt":"2005/07/11 14:33:41 UTC","id":18,"notes":"attic","repeat":"w:5","color":"","completedAt":null,"projectId":null,"contextId":9},{"name":"ice cream","lockVersion":1,"id":19,"createdAt":"2005/07/13 16:55:49 UTC","projectId":null,"contextId":4},{"dueAt":null,"name":"walkabout plans","lockVersion":3,"id":20,"createdAt":"2005/07/15 16:47:20 UTC","notes":"","completedAt":null,"projectId":null,"contextId":18},{"name":"recycle day","dueAt":null,"lockVersion":1,"activeAt":null,"notes":"","createdAt":"2005/07/30 00:06:24 UTC","repeat":"n:2:4","id":21,"color":"","projectId":null,"contextId":17}],"Context":[{"parentContextId":4,"name":"costco","lockVersion":5,"id":2,"createdAt":"2005/06/29 07:25:48 UTC","notes":""},{"parentContextId":null,"name":"shopping & errands","lockVersion":3,"id":4,"createdAt":"2005/07/05 17:18:59 UTC","notes":""},{"parentContextId":4,"name":"target","lockVersion":2,"id":5,"createdAt":"2005/07/05 17:20:31 UTC","notes":""},{"name":"agenda","parentContextId":null,"lockVersion":3,"notes":"","createdAt":"2005/07/05 19:25:41 UTC","id":6},{"parentContextId":6,"name":"ross","lockVersion":1,"id":7,"createdAt":"2005/07/05 19:50:43 UTC","notes":""},{"parentContextId":6,"name":"ali","lockVersion":2,"id":9,"createdAt":"2005/07/05 19:50:53 UTC","notes":"attic office"},{"name":"computer & phone","parentContextId":null,"lockVersion":4,"notes":"","createdAt":"2005/07/06 01:44:57 UTC","id":10},{"name":"research","parentContextId":null,"lockVersion":2,"notes":"","createdAt":"2005/07/06 01:45:34 UTC","id":12},{"name":"someday maybe","parentContextId":null,"lockVersion":2,"notes":"","createdAt":"2005/07/06 01:47:34 UTC","id":13},{"parentContextId":null,"name":"waiting","lockVersion":2,"id":14,"createdAt":"2005/07/06 01:48:13 UTC","notes":""},{"parentContextId":null,"name":"work","lockVersion":2,"id":15,"createdAt":"2005/07/06 01:49:10 UTC","notes":""},{"name":"home depot","parentContextId":4,"lockVersion":1,"notes":"","createdAt":"2005/07/06 02:08:18 UTC","id":16},{"parentContextId":null,"name":"home","lockVersion":2,"id":17,"createdAt":"2005/07/06 02:40:43 UTC","notes":""},{"name":"jim","parentContextId":6,"lockVersion":1,"notes":"","createdAt":"2005/07/15 16:47:00 UTC","id":18}],"Project":[{"name":"startup","dueAt":"2005/09/01 07:00:00 UTC","lockVersion":7,"id":1,"createdAt":"2005/06/30 07:38:51 UTC","notes":"next great thing\n","completedAt":null},{"dueAt":null,"name":"sell house","lockVersion":1,"id":2,"createdAt":"2005/07/04 02:08:25 UTC","notes":""},{"dueAt":null,"name":"taxes","lockVersion":1,"id":4,"createdAt":"2005/07/04 02:08:39 UTC","notes":""},{"dueAt":null,"name":"sell car","lockVersion":1,"id":5,"createdAt":"2005/07/15 16:46:09 UTC","notes":""}],"Preference":[{"name":"dashboard.numActionColumns","lockVersion":3,"createdAt":"2005/07/18 05:01:44 UTC","id":1,"value":"2"},{"name":"dashboard.activeDaysAhead","lockVersion":7,"createdAt":"2005/07/18 07:06:50 UTC","id":2,"value":null}]})

{if actions.length > 0}
  ${render('action/newInstanceMini')}
{/if}

<div>
  <h2>${actions.length} Completed Actions</h2>
  {if actions.length > 0}
    <table class="hoverable sortable" id="completedActions">
      <tr><td nowrap="nowrap">Action</td>
          <td nowrap="nowrap">Context</td>
          <td nowrap="nowrap">Completed at</td>
          <td></td>
          <td></td>
          </tr>
    {for action in actions}
      <tr><td nowrap="nowrap">
            <input type="checkbox" ${action.completedAt != null ? '"checked"' : ''}
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode.parentNode);{/minify}">
              ${%linkToLocal(action.name, 'action', 'show', action.id, { style: colorStyle(action) })%}</td>
          <td>${linkToLocal(action.cname, 'context', 'show', action.contextId)}</td>
          <td>${localDateString(action.completedAt)}</td>
          <td>${linkToLocal('edit', 'action', 'edit', action.id)}</td>
          <td>${%linkToLocal('delete', 'action', 'destroy', action.id, { confirm: true })%}</td>
          </tr>
    {/for}
    </table>
  {/if}
</div>

{if actions.length > 0}
<br>
${%buttonToLocal('Delete All Completed Actions', 'action', 'destroyCompleted', null, { confirm: true })%}
{/if}

{eval}
return TrimPath.junction.env.eventually("Sortable.init()");
{/eval}

${startFormTagLocal('action', 'update', action.id)}
<h2 style="${colorStyle(action)}">Action: ${action.name}</h2>
 <div class="wide">
  <label for="action[name]" class="required">Name:</label> ${%textField('action', 'name', { size: 30 })%} 
    ${errorMessageOn('action', 'name')}<br/>
  <label for="action[notes]">Notes:</label> ${%textArea('action', 'notes', { cols: 40, rows: 10 })%}<br/>
  <label for="action[contextId]">Context:</label> ${select('action', 'contextId', Context.choices())}<br/>
  <label for="action[projectId]">Project:</label> ${select('action', 'projectId', Project.choices())}<br/>
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt', { valueFilter: localDateString })%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt', { valueFilter: localDateString })%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[completedAt]">Completed at:</label> ${%textField('action', 'completedAt', { valueFilter: localDateString })%}
    <input type="submit" value="Today" onclick="{minify}
      $('action[completedAt]').value = TrimPath.junctionUtil.toLocalDateString(new Date());
      return false;
      {/minify}"/>
    <br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[repeat]">Repeat:</label> ${render('action/repeat')}<br/>
  <div class="submit">
   ${submitButtonLocal("doUpdate", "OK")}
   ${linkToLocal('Cancel', 'action', 'show', action.id)}
  </div>
 </div>
${endFormTag()}

${render('action/newInstanceMini')}

<h2>${actions.length} Remaining Actions</h2>
${render('action/indexBody')}

<div id="actionsArea">
{if actions.length > 0}
${%startFormTagLocal('action', 'updateBulk', null, { style: 'border: none;'})%}
  <table class="hoverable sortable" id="actions">
    <tr><td nowrap="nowrap" style="display:none;" class="bulk">Selected</td>
        <td>Action</td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td>Context</td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td>Project</td>
        {/if}
        <td nowrap="nowrap">Active at</td>
        <td nowrap="nowrap">Due at</td>
        <td nowrap="nowrap">Repeat</td>
        <td></td><td></td>
        </tr>
  {for action in actions}
    <tr id="action_${action.id}">
        <td nowrap="nowrap" style="display:none; text-align:center;" class="bulk">
            <input type="checkbox" 
                   name="selectedActions[${action.id}]" id="selectedActions[${action.id}]"/>
            </td>
        <td nowrap="nowrap">
            <input type="submit" class="toggleAction"
                   name="toggleAction_${action.id}"
                   value="${action.completedAt == null ? 'Done' : 'Not Done'}"
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode.parentNode);
                            return false;{/minify}"
                   style="display:inline;"/>
            ${actionLink(res, action)}
        </td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td nowrap="nowrap">
            {if action.contextId != null}
               ${linkToLocal(action.getContext().name, 'context', 'show', action.contextId)}
            {/if}</td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td>{if action.projectId != null}
               ${linkToLocal(action.getProject().name, 'project', 'show', action.projectId)}
            {/if}</td>
        {/if}
        <td nowrap="nowrap">${localDateString(action.activeAt)}</td>
        <td nowrap="nowrap">${localDateString(action.dueAt)}</td>
        <td nowrap="nowrap">${action.repeatSummary()}</td>
        <td>${linkToLocal('edit', 'action', 'edit', action.id)}</td>
        <td>${%linkToLocal('delete', 'action', 'destroy', action.id, { confirm: true })%}</td>
    </tr>
  {/for}
  </table>
 
  <br/>
  <div>
    <a href="#" 
       onclick="TrimPath.junction.env.toggleDisplay('bulkMods'); {minify}
                for (var i = 0, rows = $('actions').rows; i < rows.length; i++)
                    TrimPath.junction.env.toggleDisplay(rows[i].cells[0]);
                return false;{/minify}">
       bulk changes</a>
    <div id="bulkMods" style="display:none;">
    <br/>
    <fieldset class="bulk">
      <legend>Bulk changes to selected Actions above: 
        (<a href="#" onclick="{minify}
                              var c = $('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = true;
                              }; return false{/minify}">all</a> or 
         <a href="#" onclick="{minify}
                              var c = $('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = false;
                              }; return false{/minify}">none</a>)
      </legend>
      {var choices = Context.choices()}
      ${choices.unshift(["(no change)", "noop"]) |eat}
      <label>Context:</label> ${select('bulk_action', 'contextId', choices)}<br/>
      {var choices = Project.choices()}
      ${choices.unshift(["(no change)", "noop"]) |eat}
      <label>Project:</label> ${select('bulk_action', 'projectId', choices)}<br/>
      {var choices = [["(no change)", "noop"]].concat(colorChoices)}
      <label>Color:</label> ${select('bulk_action', 'color', choices)}<br/>
      <label for="bulk_action[activeAt]">Active at:</label> 
         <input type="text" name="bulk_action[activeAt]" id="bulk_action[activeAt]" value="(no change)">
         ${dateFillSelect('bulk_action[activeAt]')}<br/>
         <span class="btw">example: 2005/09/01</span><br/>
      <label for="bulk_action[dueAt]">Due at:</label> 
         <input type="text" name="bulk_action[dueAt]" id="bulk_action[dueAt]" value="(no change)">
         ${dateFillSelect('bulk_action[dueAt]')}<br/>
         <span class="btw">example: 2005/09/01</span><br/>
      <div class="submit">
        ${%submitButtonLocal("doBulkUpdate", "Change selected Actions", { confirm: true })%}
      </div>
      <div class="submit">
        ${%submitButtonLocal("doBulkDelete", "Deleted selected Actions", { confirm: true })%}
      </div>
    </fieldset>
    </div>
  </div>
${endFormTag()}
{/if}
</div>

{eval}
return TrimPath.junction.env.eventually("Sortable.init()");
{/eval}

{var normalForm = req.actionName == 'create' || req.actionName == 'newInstance'}
{var numCols    = normalForm ? 30 : 15}
${startFormTagLocal('action', 'create')}
  <h2>Create a new Action
      {if defined('action') && action.contextId != null}in ${action.getContext().name}{/if}
      </h2>
  <label for="action[name]" class="required">Name:</label> ${textField('action', 'name')} 
    ${errorMessageOn('action', 'name')}<br/>
  <label for="action[notes]">Notes:</label> ${%textArea('action', 'notes', { cols: numCols, rows: 7 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 1}
    <label for="action[contextId]">Context:</label> ${select('action', 'contextId', choices)}<br/>
  {/if}
  {var choices = Project.choices()}
  {if choices.length > 1}
    <label for="action[projectId]">Project:</label> ${select('action', 'projectId', choices)}<br/>
  {/if}
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt', { valueFilter: localDateString })%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt', { valueFilter: localDateString })%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[repeat]">Repeat:</label> ${render('action/repeat')}<br/>
  <div class="submit">
    ${submitButtonLocal("doCreate", "OK")}
    {if normalForm}
      ${linkToLocal('Cancel', 'action', 'index')}
    {/if}
  </div>
${endFormTag()}

{eval}
return TrimPath.junction.env.eventually("$('action[name]').focus()");
{/eval}

${startFormTagLocal('action', 'createBulk')}
  <h2>Bulk entry of Actions</h2>
  <label for="names" class="required">Actions:</label> 
    <textarea name="names" id="names" cols="50" rows="8"></textarea><br/>
    <span class="btw">Enter or paste one action per line</span><br/>
  <br/>
  <label for="action[contextId]">Context:</label> ${select('action', 'contextId', Context.choices())}<br/>
  <label for="action[projectId]">Project:</label> ${select('action', 'projectId', Project.choices())}<br/>
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt')%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt')%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <br/>
  <div class="submit">
    ${submitButtonLocal("doCreateBulk", "Create Actions")}
    ${linkToLocal('Cancel', 'action', 'index')}
  </div>
${endFormTag()}

{eval}
return TrimPath.junction.env.eventually("$('names').focus()");
{/eval}

<table width="90%"><tr><td nowrap="nowrap">
<div class="newInstanceMini">
${%startFormTagLocal('action', 'create', null, { id: 'quickAddAction' })%}
<table>
<tr><td>Action:</td>
    <td nowrap="nowrap" width="99%">
        ${%textField('action', 'name', { size: 50 })%} 
        {var choices = Context.choices()}
        {if choices.length > 1}
          Context: ${%select('action', 'contextId', choices)%}
        {/if}
        {var choices = Project.choices()}
        {if choices.length > 1}
          Project: ${%select('action', 'projectId', choices)%}
        {/if}
        </td>
    </tr>
<tr><td>Color:</td>
    <td nowrap="nowrap">
        ${%select('action', 'color', colorChoices)%}
        Active: ${%hiddenField('action', 'activeAt', { valueFilter: localDateString })%} 
                ${%dateFillSelect('action[activeAt]')%}
        ${%submitButtonLocal("doCreate", "Add Action")%} 
        ${%linkTo('detail entry', 'action', 'newInstance', null, { onclick: "TrimPath.junction.localPost('action', 'newInstance', null, TrimPath.junction.env.formToReq('quickAddAction')); return false" })%} | 
        ${%linkToLocal('bulk entry', 'action', 'newInstanceBulk')%}
        <input type="hidden" name="from" value="${req.controllerName},${req.actionName}"/>
        </td>
    </tr>
</table>
${endFormTag()}
</div>
</td></tr></table>

{eval}
return TrimPath.junction.env.eventually("$('action[name]').focus()");
{/eval}

${res.action_repeat = Action.repeatCodeToInfo(defined('action') ? action.repeat : null) |eat}
<div class="actionRepeat">
  <table>
    <tr><td nowrap="nowrap">
      ${radioButton('action_repeat', 'type', '')} 
        Don't repeat<br/>
      ${radioButton('action_repeat', 'type', 'w')} 
        Every 
        <select name="action_repeat[w1]">
          ${optionsForSelect(dayOfWeekChoices, action_repeat.w1 != null ? action_repeat.w1 : 1)}
        </select>
        <br/>
      ${radioButton('action_repeat', 'type', 'm')} 
        On the 
        <input type="input" name="action_repeat[m1]" size="3" value="${action_repeat.m1 || 5}"/>th day of every month<br/>
      ${radioButton('action_repeat', 'type', 'n')} 
        On the
        <select name="action_repeat[n1]">
          ${optionsForSelect(weekOfMonthChoices, action_repeat.n1 || 1)}
        </select>
        <select name="action_repeat[n2]">
          ${optionsForSelect(dayOfWeekChoices, action_repeat.n2 != null ? action_repeat.n2 : 1)}
        </select>
        of each month
        <br/>
      ${radioButton('action_repeat', 'type', 'y')} 
        On 
        <input type="input" name="action_repeat[y1]" size="3" value="${action_repeat.y1 || 1}"/> /
        <input type="input" name="action_repeat[y2]" size="3" value="${action_repeat.y2 || 31}"/> of each year (mm/dd)<br/>
      ${radioButton('action_repeat', 'type', 'a')} 
        <input type="input" name="action_repeat[a1]" size="4" value="${action_repeat.a1 || 14}"/>
        days after the Action is completed<br/>
    </td></tr>
  </table>
</div>

<div class="form">
 <h2 style="${colorStyle(action)}">Action: ${action.name}</h2>
 <table>
  <tr valign="top">
    <td class="label required">Name:
    </td>
    <td style="${colorStyle(action)}">${action.name}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">Notes:
    </td>
    <td>${action.notes}
    </td>
  </tr>
  <tr>
    <td class="label">Context:
    </td>
    <td>{if action.contextId}${linkToLocal(action.getContext().name, 'context', 'show', action.contextId)}{/if}
    </td>
  </tr>
  <tr>
    <td class="label">Project:
    </td>
    <td>{if action.projectId}${linkToLocal(action.getProject().name, 'project', 'show', action.projectId)}{/if}
    </td>
  </tr>
  <tr>
    <td class="label">Color:
    </td>
    <td style="${colorStyle(action)}">${action.color}
    </td>
  </tr>
  <tr>
    <td class="label">Active at:
    </td>
    <td>${localDateString(action.activeAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Due at:
    </td>
    <td>${localDateString(action.dueAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Completed at:
    </td>
    <td>${localDateString(action.completedAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Repeat:
    </td>
    <td>${action.repeatSummary()}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      ${buttonToLocal('Edit', 'action', 'edit', action.id)} 
      {if action.completedAt == null}
        ${buttonToLocal('Mark As Completed', 'action', 'toggleComplete', action.id)}
      {/if}
      ${%buttonToLocal('Delete', 'action', 'destroy', action.id, { confirm: true })%}
    </td>
  </tr>
 </table>
</div>

${startFormTagLocal('context', 'update', context.id)}
 <h2>Context: ${context.name}</h2>
 <div class="wide">
  <label for="context[name]" class="required">Name:</label> ${textField('context', 'name')} 
    ${errorMessageOn('context', 'name')}<br/>
  <label for="context[notes]">Notes:</label> ${%textArea('context', 'notes', { cols: 40, rows: 10 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 2}
    <label for="context[parentContextId]">Parent Context:</label> ${select('context', 'parentContextId', choices)}<br/>
  {/if}
  <div class="submit">
    ${submitButtonLocal("doUpdate", "OK")}
    ${linkToLocal('Cancel', 'context', 'show', context.id)}
  </div>
 </div>
${endFormTag()}

{if contexts.length > 0}
  ${render('action/newInstanceMini')}
{/if}

<div class="contexts">
  <h2>Contexts</h2>
  <table class="hoverable">
  {if contexts.length > 0}
    {for context in contexts}
      <tr><td nowrap="nowrap">
            {if context.name == context.nameInLevel}
               <h3>${linkToLocal(context.name, 'context', 'show', context.id)}</h3>
            {else}
               <h4>${linkToLocal(context.name, 'context', 'show', context.id)}</h4>
            {/if}
          </td>
          <td>${linkToLocal('edit', 'context', 'edit', context.id)}</td>
          <td>${%linkToLocal('delete', 'context', 'destroy', context.id, { confirm: destroyConfirm(context) })%}</td>
          </tr>
    {/for}
    </table>
  {else}
    You haven't created any Contexts yet.<p>
    A Context represents a place or environment 
    where key tools are available to complete some Actions.  
    Example Contexts might be "computer & phone", "office", "backyard".<p>
    Would you like to create a Context now?<p>
  {/if}
</div>

<br/>
${buttonToLocal('Create a new Context', 'context', 'newInstance')}

${startFormTagLocal('context', 'create')}
 <h2>Create a new Context</h2>
 <div class="wide">
  <label for="context[name]" class="required">Name:</label> ${textField('context', 'name')}
    ${errorMessageOn('context', 'name')}<br/>
  <label for="context[notes]">Notes:</label> ${%textArea('context', 'notes', { cols: 40, rows: 10 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 1}
    <label for="context[parentContextId]">Parent Context:</label> ${select('context', 'parentContextId', choices)}<br/>
  {/if}
  <div class="submit">
    ${submitButtonLocal("doCreate", "OK")}
    ${linkToLocal('Cancel', 'context', 'index')}
  </div>
 </div>
${endFormTag()}

<div class="form">
 <h2>Context: ${context.name}</h2>
 <table>
  <tr valign="top">
    <td class="label required">Name:
    </td>
    <td>${context.name}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">Notes:
    </td>
    <td>${context.notes}
    </td>
  </tr>
  <tr>
    <td class="label">Parent Context:
    </td>
    <td>{if context.parentContextId}${linkToLocal(context.getParentContext().name, 'context', 'show', context.parentContextId)}{/if}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      ${%buttonToLocal('Edit', 'context', 'edit', context.id)%}
      ${%buttonToLocal('Delete', 'context', 'destroy', context.id, { confirm: destroyConfirmMessage })%}
    </td>
  </tr>
 </table>
</div>

<div class="related">
  ${render('action/indexBody')}
  <br/>
  ${startFormTagLocal('action', 'newInstance')}
    <input type="hidden" name="action[contextId]" id="action[contextId]" value="${context.id}">
    ${%submitButtonLocal('doActionCreate', 'Add an Action to ' + TrimPath.junctionUtil.encodeQuotes(context.name))%}
  ${endFormTag()}
</div>

<div>
<h2>About Next Action</h2>
Next Action version: ${NEXT_ACTION_VERSION} beta<p>

Next Action is a <a href="http://trimpath.com/project/wiki/GettingThingsDone">Getting 
Things Done</a> todo-list tracking tool.  It's a personal database for your GTD info.

<h3>Features Include:</h3>
<ul>
<li>Free and Open Source.</li>
<li>Fast and snappy.</li>
<li>Easy to use.</li>
<li>It runs on your computer, so you can use it when you're not connected online.</li>
</ul>

<h3>Get started:</h3>
Start by saving Next Action to your computer.  Just use the 
'File -> Save Page As...' menu command in your browser (Firefox, right?).  
And, be sure to use 'Save as type:' of 'Web Page, complete', 
which will actually save an .htm file and a directory of 
any associated files (stylesheets, javascripts, etc).<p>

Next, open up that local .htm file into your browser.  Now you're working with your own local app and local data.<p>

You can create your own actions from the ${linkToLocal('Actions', 'action', 'index')} page.<p>

The ${linkToLocal('Dashboard', 'home', 'dashboard')} 
page gives you a concise overview of your remaining actions.<p>

The ${linkToLocal('Dashboard', 'home', 'dashboard')} page is 
also great for printing out as an action cheatsheet for when you're on the go.  
You can also output easily to your 
<a href="http://trimpath.com/project/wiki/HipsterTabletPc">Hipster Tablet PC</a><p>

Don't forget to save your work early and often by using 'File -> Save Page As...'.  
The Next Action tool doesn't (yet) save changes to disk automatically.<p>

Also, if you want to start from a clean database, click here: 
${%buttonToLocal('Delete All Records!', 'home', 'deleteAllRecords', null, { confirm: 'This operation is irreversible.  Are you sure you want to clear the entire database?' })%}

<h3>Software Required:</h3>
Firefox 1.0+.  This beta version will somewhat run in the IE 6.0+, too, 
but it's best right now just doing view or read-only operations.  
Opera and Safari is not supported (yet).<p>

<h3>What is 'show me the code'?</h3>
Next Action is a 
<a href="http://trimpath.com/project/wiki/SinglePageApplicationAndDevelopmentEnvironment">SPADE</a> 
application, meaning it is a single page application that 
includes a built-in development environment.  
So, you can customize and tailor Next Action 
to your exact needs, without needing any other software.<p>

If you know <a href="http://trimpath.com/project/wiki/RubyRailsVsJavaScriptJunction">Ruby On Rails</a>, 
you should be right at home with the 
<a href="http://trimpath.com/project/wiki/TrimJunction">Junction</a> 
MVC framework that was used to build Next Action.  It's also a 
frictionless way to get familiar with Rails-like concepts.<p>

<h3>Learn More:</h3>
Check back at the Next Action 
<a href="http://trimpath.com/project/wiki/NextAction">intro page</a> 
and the <a href="http://trimpath.com/blog">TrimPath blog</a> every 
once in awhile.<p>

</div>

{var NUM_ACTION_COLUMNS = Preference.getInt('dashboard.numActionColumns', 3)}
{var ACTION_DAYS_AHEAD  = Preference.getInt('dashboard.activeDaysAhead', null)}
{var FOCUS_CONTEXT_ID   = req['focusContextId'] || 'all'}
{var FOCUS_PROJECT_ID   = req['focusProjectId'] || 'all'}

{macro contextSection(contextId, contextName, contextNameInLevel, contextParentId)}
  {if FOCUS_CONTEXT_ID == 'all' ||
      FOCUS_CONTEXT_ID == contextId ||
      FOCUS_CONTEXT_ID == contextParentId}
    {var isTopLevel = (contextName == contextNameInLevel) || (contextId == null)}
    {if (isTopLevel)}
        <tr><td colspan="${NUM_ACTION_COLUMNS + 1}"><hr/></td></tr>
    {/if}
    <tr {if isTopLevel}class="topLevel"{/if}>
        <td valign="top" nowrap="nowrap">
          {if contextId != null}
            {if contextName == contextNameInLevel}
              <h3>${linkToLocal(contextNameInLevel, 'context', 'show', contextId)}</h3>
            {else}
              <h4>${linkToLocal(contextName, 'context', 'show', contextId)}</h4>
            {/if}
          {else}
            <i>${contextName}</i>
          {/if}
        </td>
        {var column = 0}
        {for action in actions}
          {if action.contextId == contextId &&
              (FOCUS_PROJECT_ID == 'all' ||
               FOCUS_PROJECT_ID == action.projectId)}
            {if column > 0 && column % NUM_ACTION_COLUMNS == 0}
              </tr><tr><td></td>
            {/if}
            <td id="action_${action.id}" valign="top">
              <span>
                <input type="checkbox" ${action.completedAt != null ? '"checked"' : ''}
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode);{/minify}">
                ${actionLink(res, action)}
              </span>
            </td>
            ${column = column + 1 |eat}
          {/if}
        {/for}
    </tr>
  {/if}
{/macro}

${render('action/newInstanceMini')}

<div>
  <h2>Dashboard <span class="btw">${localDateString(new Date())}</span></h2>
  {if (contexts.length > 0 || actions.length > 0)}
  <table><tr><td>
  <div class="dashboard">
    <table>
      <tr><th nowrap="nowrap">
            Context:
            {var choices = Context.choices(false)}
            {if choices.length > 0}
              <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { focusContextId: this.value, focusProjectId: '${FOCUS_PROJECT_ID}' }); return false;">
                ${optionsForSelect([['(show all)', 'all']].concat(choices), FOCUS_CONTEXT_ID)}
              </select>
            {/if}
            </th>
          <th colspan="${NUM_ACTION_COLUMNS}">
            Actions:
            {var choices = Project.choices(false)}
            {if choices.length > 0}
              <select onchange="TrimPath.junction.localGet('home', 'dash