<div>
  <h2>${actions.length} ${t('Completed Actions')}</h2>
  {if actions.length > 0}
    <table class="hoverable sortable" id="completedActions">
      <tr><td nowrap="nowrap">${t('Action')}</td>
          <td></td>
          <td nowrap="nowrap">${t('Context')}</td>
          <td></td>
          <td nowrap="nowrap">${t('Completed at')}</td>
          <td></td>
          <td></td>
          <td></td>
          </tr>
    {for action in actions}
      <tr><td nowrap="nowrap">
            <input type="checkbox" ${action.completed_at != null ? '"checked"' : ''}
                   onclick="TrimPath.junctionClient.postAsync('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            $(this.parentNode.parentNode).fadeOut('slow');{/minify}">
              ${actionLink(res, action)}</td>
          <td>  </td>
          <td>
            {if action.getContext()}
              ${linkToLocal(h(action.cname || ''), 'context', 'show', action.context_id, modelToolTip(action.getContext(), 'context', res))}
            {/if}
          </td>
          <td>  </td>
          <td>${localDateString(action.completed_at)}</td>
          <td>${linkToLocal(t('edit'), 'action', 'edit', action.id)}</td>
          <td>  </td>
          <td>${%linkToLocal(t('delete'), 'action', 'destroy', action.id, { method: 'post', confirm: t('Are you sure?')})%}</td>
          </tr>
    {/for}
    </table>
  {else}
    <br/>
    <div class="firstTime">
      ${render('action/completedFirstTime')}
    </div>
  {/if}
</div>

{if actions.length > 0}
<br>
${%linkToLocal(t('Delete All Completed Actions'), 'action', 'destroyCompleted', null, { method: 'post', confirm: t('Are you sure?'), 'class': 'button' })%}
{/if}

This is where we list any Actions that you've completed.  
<p>  
You don't have any completed Actions right now.
<p>  
You can add new Actions using the entry form on the right.

Đây là nơi liệt kê tất cả các công việc bạn đã làm xong.  
Tuy nhiên, bạn không có một công việc nào được hoàn thành vào lúc này cả, 
nhưng chúng tôi chắc chắn rằng bạn sẽ làm xong nhanh chóng công việc bạn cần làm.
<p>  Bạn có thể dùng chương trình bên phải để bỏ thêm vào các công việc cần làm.

${startFormTagLocal('action', 'update', action.id)}
<h2>${t('Action')}: ${%linkToLocal(h(action.name), 'action', 'show', action.id, { style: colorStyle(action)})%}</h2>
 <div class="wide">
  <label for="action[name]" class="required">${t('Name')}:</label> ${%textField('action', 'name', { size: 30 })%} 
    ${errorMessagesOn('action', 'name')}<br class="clear"/>
  <label for="action[notes]">${t('Notes')}:</label> ${%textArea('action', 'notes', { cols: 40, rows: 10, wrap: 'off' })%}<br class="clear"/>

  {var choices = Context.parentChoices()}
  {if choices.length > 1}
    <label for="action[context_id]">${t('Context')}:</label> ${select('action', 'context_id', choices)}<br class="clear"/>
  {/if}
  {var choices = Project.parentChoices()}
  {if choices.length > 1}
    <label for="action[project_id]">${t('Project')}:</label> ${select('action', 'project_id', choices)}<br class="clear"/>
  {/if}
  {var choices = Party.choices(null, res)}
  {if (TrimPath.junction.env.type == 'server')}
    {if choices.length > 2}
      {var contact = action.contactVal()}
      <label for="action[contact]">${t('Contact')}:</label> ${select('action', 'contact', choices)}<br class="clear"/>
    {/if}
  {/if}
  <label for="action[color]">${t('Color')}:</label> ${select('action', 'color', tChoices(colorChoices))}<br class="clear"/>
  <label for="action[active_at]">${t('Active at')}:</label> ${%textField('action', 'active_at', { valueFilter: localDateString })%} ${dateFillSelect('action[active_at]')}<br class="clear"/>
    ${sampleDate()}
  <label for="action[due_at]">${t('Due at')}:</label> ${%textField('action', 'due_at', { valueFilter: localDateString })%} ${dateFillSelect('action[due_at]')}<br class="clear"/>
    ${sampleDate()}
  <label for="action[completed_at]">${t('Completed at')}:</label> ${%textField('action', 'completed_at', { valueFilter: localDateString })%}
    <a href="#" class="button"
      onclick="{minify}
        document.getElementById('action[completed_at]').value = TrimPath.junctionUtil.toLocalDateString(new Date());
        return false;
        {/minify}">
      ${t('Today')}
    </a>
    <br class="clear"/>
    ${sampleDate()}
  <label for="action[repeat]">${t('Repeat')}:</label> ${render('action/repeat')}<br class="clear"/>
  <div class="submit">
   ${submitButtonLocal("doUpdate", "  OK  ")}
   ${%linkToLocal(t('Cancel'), 'action', 'show', action.id, {'class':'text_link'})%}
  </div>
 </div>
${endFormTag()}

<script>
$(document).ready(function() {
    makePopUpCal('action[active_at]', 'action[due_at]', 'action[completed_at]');
});
</script>

{if actions.length > 1}
  <div style="float:right; padding-top:4px;">
    <a
       href="#" 
       onclick="toggleDisplay('bulkMods'); {minify}
                for (var i = 0, rows = document.getElementById('actions').rows; i < rows.length; i++)
                    toggleDisplay(rows[i].cells[0]);
                return false;{/minify}" class="txtLinkUnLn">
       ${t('bulk changes')}</a>
      
  </div>
{/if}

<h2>${actions.length} ${t('Remaining Action')}${ actions.length != 1 ? t('s') : '' }</h2>

${render('action/indexBody')}

{if actions.length <= 0}
  {if zeroActionRecords()}
    <p>${t('An Action is a task or to-do item')}.</p>
  {/if}
  <p>${t('Please use the "Add a new Action" entry area on the right to add an Action')}.</p>
{/if}

<div id="actionsArea">
{if actions.length > 0}
${%startFormTagLocal('action', 'updateBulk', null, { style: 'border: none;'})%}
  <table class="hoverable sortable" id="actions" border="0" cellpadding="0" cellspacing="0" style="margin-right: 5px;">
    <tr><td nowrap="nowrap" style="display:none;" class="bulk">${t('Selected')}</td>
        <td>${t('Action')}</td>
        <td> </td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td nowrap>${t('Context')}</td>
          <td> </td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td nowrap>${t('Project')}</td>
          <td> </td>
        {/if}
  {if (TrimPath.junction.env.type == 'server')}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.contact}
          <td nowrap>${t('Contact')}</td>
          <td> </td>
        {/if}
  {/if}        
        <td nowrap="nowrap">${t('Active at')}</td>
        <td> </td>
        <td nowrap="nowrap">${t('Due at')}</td>
        <td> </td>
        <td nowrap="nowrap">${t('Repeat')}</td>
        <td> </td>
        <td> </td><td> </td>
        <td> </td>
        </tr>
  {for action in actions}
    <tr id="action_${action.id}" class="actionRow ${action_index % 2 == 0 ? 'even' : 'odd'}">
        <td nowrap="nowrap" style="display:none; text-align:center;" class="bulk" valign="middle">
            <input type="checkbox" 
                   name="selectedActions[${action.id}]" id="selectedActions[${action.id}]"/>
            </td>
        <td nowrap="nowrap" valign="middle">
            <input type="submit"
                   name="toggleAction_${action.id}"
                   value="${action.completed_at == null ? t('Done') : t('Not Done')}"
                   onclick="TrimPath.junctionClient.postAsync('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            $(this.parentNode.parentNode).fadeOut('slow');
                            return false;{/minify}"
                   style="display:inline;"/>
            ${actionLink(res, action)}
        </td>
        <td> </td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td nowrap="nowrap" class="subLevel">
            {if action.context_id != null}
               {var cname = action.cname || res['contextName_' + action.context_id]}
               {if cname == null}
                 {var context = action.getContext()}
                 {if context != null}
                   {var cname = action.cname = res['contextName_' + action.context_id] = context.name}
                 {else}
                   {var cname = 'unknown'}
                 {/if}
               {/if}
               ${linkToLocal(h(cname), 'context', 'show', action.context_id, modelToolTip(action.getContext(), 'context', res))}
            {/if}</td>
          <td> </td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td>
            {if action.project_id != null} 
               {var pname = action.pname || res['projectName_' + action.project_id]}
               {if pname == null}
                 {var project = action.getProject()}
                 {if project != null}
                   {var pname = action.pname = res['projectName_' + action.project_id] = project.name}
                 {else}
                   {var pname = 'unknown'}
                 {/if}
               {/if}
               ${linkToLocal(h(pname), 'project', 'show', action.project_id, modelToolTip(action.getProject(), 'project', res))}
            {/if}</td>
          <td> </td>
        {/if}
  {if (TrimPath.junction.env.type == 'server')}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.contact}
          <td>
            {if action.contactVal() != null} 
               ${linkToLocal(h(action.sname || res['contactName_' + action.contact_id] || action.getContact().displayName()), action.contact_type, 'show', action.contact_id)}
            {/if}</td>
          <td> </td>
        {/if}
  {/if}        
        <td nowrap="nowrap">${localDateString(action.active_at)}</td>
        <td> </td>
        <td nowrap="nowrap">${localDateString(action.due_at)}</td>
        <td> </td>
        <td nowrap="nowrap">${action.repeatSummary()}</td>
        <td> </td>
        <td>${linkToLocal(t('edit'), 'action', 'edit', action.id)}</td>
        <td> </td>
        <td>${%linkToLocal(t('delete'), 'action', 'destroy', action.id, { method: 'post', confirm: t('Are you sure?')})%} </td>
    </tr>
  {/for}
  </table>
 
  <br/>
  <div>
    {if actions.length > 0}
      <a href="#" onclick="toggleDisplay('bulkMods'); {minify}
                for (var i = 0, rows = document.getElementById('actions').rows; i < rows.length; i++)
                    toggleDisplay(rows[i].cells[0]);
                return false;{/minify}" class="text_link">
       ${t('bulk changes')}</a>
    {/if}
    <div id="bulkMods" style="display:none;">
    <br/>
    <fieldset class="bulk">
      <legend>${t('Bulk changes to selected Actions above')}: 
        (<a href="#" onclick="{minify}
                              var c = document.getElementById('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = true;
                              }; return false{/minify}" class="txtLinkUnLn">${t('all')}</a> ${t('or')} 
         <a href="#" onclick="{minify}
                              var c = document.getElementById('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = false;
                              }; return false{/minify}" class="txtLinkUnLn">${t('none')}</a>)
      </legend>
      {var choices = Context.parentChoices()}
      ${choices.unshift(['(no change)', "noop"]) |eat}
      <label>${t('Context')}:</label> ${select('bulk_action', 'context_id', choices)}<br class="clear"/>
      {var choices = Project.parentChoices()}
      ${choices.unshift(['(no change)', "noop"]) |eat}
      <label>${t('Project')}:</label> ${select('bulk_action', 'project_id', choices)}<br class="clear"/>
      {var choices = Party.choices(null, res)}
      ${choices.unshift([t('(no change)'), "noop"]) |eat}
      {if (TrimPath.junction.env.type == 'server')}
        <label>${t('Contact')}:</label> ${select('bulk_action', 'contact', choices)}<br class="clear"/>
      {/if}
      {var choices = [['(no change)', "noop"]].concat(tChoices(colorChoices))}
      <label>${t('Color')}:</label> ${select('bulk_action', 'color', choices)}<br class="clear"/>
      <label for="bulk_action[active_at]">${t('Active at')}:</label> 
         <input type="text" name="bulk_action[active_at]" id="bulk_action[active_at]" value="(no change)">
         ${dateFillSelect('bulk_action[active_at]')}<br class="clear"/>
         ${sampleDate()}
      <label for="bulk_action[due_at]" style="white-space: nowrap;">${t('Due at')}:</label> 
         <input type="text" name="bulk_action[due_at]" id="bulk_action[due_at]" value="(no change)">
         ${dateFillSelect('bulk_action[due_at]')}<br class="clear"/>
         ${sampleDate()}
      <div class="submit">
        ${%submitButtonLocal("doBulkUpdate", t('Change selected Actions'), { confirm: t('Are you sure?')})%}
      </div>
      <div class="submit">
        ${%submitButtonLocal("doBulkDelete", t('Deleted selected Actions'), { confirm: t('Are you sure?') })%}
      </div>
    </fieldset>
    </div>
  </div>
${endFormTag()}
{/if}
</div>

<script>
$(document).ready(function() {
    makePopUpCal('bulk_action[active_at]', 'bulk_action[due_at]');
});
</script>

{var normalForm = req.actionName == 'create' || req.actionName == 'newInstance'}
{var numCols    = normalForm ? 30 : 15}
${startFormTagLocal('action', 'create')}
 <div class="wide">
  <h2>${t('Create a new Action')}
      {if defined('action') && action.context_id != null && action.getContext() != null}${t('in')} <i>${h(action.getContext().name)}</i>{/if}
      </h2>
  <label for="action[name]" class="required">${t('Name')}:</label> ${textField('action', 'name')} 
    ${errorMessagesOn('action', 'name')}<br/>
  <label for="action[notes]">${t('Notes')}:</label> ${%textArea('action', 'notes', { cols: numCols, rows: 7, wrap: 'off' })%}<br/>
  {var choices = Context.parentChoices()}
  {if choices.length > 1}
    <label for="action[context_id]">${t('Context')}:</label> ${select('action', 'context_id', choices)}<br class="clear"/>
  {/if}
  {var choices = Project.parentChoices()}
  {if choices.length > 1}
    <label for="action[project_id]">${t('Project')}:</label> ${select('action', 'project_id', choices)}<br class="clear"/>
  {/if}
{if (TrimPath.junction.env.type == 'server')}
  {var choices = Party.choices(null, res)}
  {if choices.length > 2}
    {var contact = action.contactVal()}
    <label for="action[contact]">${t('Contact')}:</label> ${select('action', 'contact', choices)}<br class="clear"/>
  {/if}
{/if}  
  <label for="action[color]">${t('Color')}:</label> ${select('action', 'color', tChoices(colorChoices))}<br/>
  <label for="action[active_at]">${t('Active at')}:</label> ${%textField('action', 'active_at', { valueFilter: localDateString })%} ${dateFillSelect('action[active_at]')}<br/>
    ${sampleDate()}
  <label for="action[due_at]">${t('Due at')}:</label> ${%textField('action', 'due_at', { valueFilter: localDateString })%} ${dateFillSelect('action[due_at]')}<br/>
    ${sampleDate()}
  <label for="action[repeat]">${t('Repeat')}:</label> ${render('action/repeat')}<br/>
  <div class="submit">
    ${submitButtonLocal("doCreate", "  OK  ")}
    {if normalForm}
      ${%linkToLocal(t('Cancel'), 'action', 'index', null, {'class':'text_link'})%}
    {/if}
  </div>
 </div>
${endFormTag()}

<script>
window.onload = function() {
    document.getElementById('action[name]').focus();
}

$(document).ready(function() {
    makePopUpCal('action[active_at]', 'action[due_at]');
});
</script>

${startFormTagLocal('action', 'createBulk')}
 <div class="wide">
  <h2>${t('Bulk entry of Actions')}</h2>
  <label for="names" class="required">${t('Actions')}:</label> 
    <textarea name="names" id="names" cols="50" rows="8"></textarea><br class="clear"/>
    <span class="btw">${t('Enter or paste one Action per line')}</span><br class="clear"/>
  <br/>
  {var choices = Context.parentChoices()}
  {if choices.length > 1}
    <label for="action[context_id]">${t('Context')}:</label> ${select('action', 'context_id', choices)}<br class="clear"/>
  {/if}
  {var choices = Project.parentChoices()}
  {if choices.length > 1}
    <label for="action[project_id]">${t('Project')}:</label> ${select('action', 'project_id', choices)}<br class="clear"/>
  {/if}
{if (TrimPath.junction.env.type == 'server')}
  {var choices = Party.choices(null, res)}
  {if choices.length > 2}
    <label for="action[contact]">${t('Contact')}:</label> ${select('action', 'contact', choices)}<br class="clear"/>
  {/if}
{/if}

  <label for="action[color]">${t('Color')}:</label> ${select('action', 'color', tChoices(colorChoices))}<br class="clear"/>
  <label for="action[active_at]">${t('Active at')}:</label> ${%textField('action', 'active_at')%} ${dateFillSelect('action[active_at]')}<br class="clear"/>
    ${sampleDate()}
  <label for="action[due_at]">${t('Due at')}:</label> ${%textField('action', 'due_at')%} ${dateFillSelect('action[due_at]')}<br class="clear"/>
    ${sampleDate()}
  <br/>
  <div class="submit">
    ${submitButtonLocal("doCreateBulk", t('Create Actions'))}
    ${%linkToLocal(t('Cancel'), 'action', 'index', null, {'class':'text_link'})%}
  </div>
 </div>
${endFormTag()}

<script>
$(document).ready(function() {
    document.getElementById('names').focus();
});

$(document).ready(function() {
    makePopUpCal('action[active_at]', 'action[due_at]');
});
</script>

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

<div class="form">
 <h2>${t('Action')}: <span style="${colorStyle(action)}">${h(action.name)}</span></h2>
 <table>
  <tr valign="top">
    <td class="label required">${t('Name')}: 
    </td>
    <td style="${colorStyle(action)}">${h(action.name)}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">${t('Notes')}: 
    </td>
    <td><pre>${h(action.notes || '')}</pre>
    </td>
  </tr>
  <tr>
    <td class="label">${t('Context')}: 
    </td>
    <td>{if action.context_id}
           {var context = action.getContext()}
           ${linkToLocal(h(context.name), 'context', 'show', action.context_id, modelToolTip(context, 'context'))}
        {/if}
    </td>
  </tr>
  <tr>
    <td class="label">${t('Project')}: 
    </td>
    <td>{if action.project_id}
           {var project = action.getProject()}
           ${linkToLocal(h(project.name), 'project', 'show', action.project_id,modelToolTip(project, 'project'))}
        {/if}
    </td>
  </tr>
  {if (TrimPath.junction.env.type == 'server')}
  <tr>
    <td class="label">${t('Contact')}: 
    </td>
    <td>{var contact = action.contactVal()}
        {if contact}
            {var party = action.getContact()}
            {if party}
              ${linkToLocal(h(party.displayName()), party.type, 'show', action.contact_id)}
            {/if}
        {/if}
    </td>
  </tr>
  {/if}
  <tr>
    <td class="label">${t('Active at')}: 
    </td>
    <td>${localDateString(action.active_at)}
    </td>
  </tr>
  <tr>
    <td class="label">${t('Due at')}: 
    </td>
    <td>${localDateString(action.due_at)}
    </td>
  </tr>
  <tr>
    <td class="label">${t('Completed at')}: 
    </td>
    <td>${localDateString(action.completed_at)}
    </td>
  </tr>
  <tr>
    <td class="label">${t('Repeat')}: 
    </td>
    <td>${action.repeatSummary()}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td class="buttons">
      ${%linkToLocal(t('Edit'), 'action', 'edit', action.id, { 'class': 'button' })%} 
      {if action.completed_at == null}
        ${%linkToLocal(t('Mark As Completed'), 'action', 'toggleComplete', action.id, { method: 'post', 'class': 'button' })%}
      {/if}
      ${%linkToLocal(t('Delete'), 'action', 'destroy', action.id, { method: 'post', confirm: t('Are you sure?'), 'class': 'button' })%}
    </td>
  </tr>
 </table>
</div>

<div id="aboutPop" class="aboutPop" {if contexts.length > 0}style="display:none;"{/if}>

{if contexts.length > 0}
  <div style="float:right;">
       
    <a id="aboutClose"
       href="#"
       onclick="$('#aboutOpen').show();$('#aboutPop').hide();return false;" class="confirm">
       close</a>
       
  </div>
{/if}

<h3>What's a Context?</h3>
<p>
A <b>Context</b> is a place where tools and resources 
are available to complete some Actions.  
You use Contexts to group and categorize your Actions.

<p>
Some common Contexts are: computer, phone, office, house, finance, shopping. 

<p>
For business usage, Contexts might be: ship, fax, invoice, mail.

<h3>Examples:</h3>
<p>
Context "shopping" might have Actions like: buy milk, buy cereal, buy birthday card, buy birthday cake.

<p>
Context "computer" might have Actions like: book conference flight, book conference hotel, order birthday gift.

<p>
Context "ship" might have Actions like: fedex conference materials, item #123 for customer jones, item #126 for customer smith.

<h3>More Possibilities:</h3>
<p>
Some more ideas for Contexts include: 
planning, errands, shopping, health, car, yard, important dates, pending, research, hobby.

</div>

<div id="aboutPop" class="aboutPop" {if contexts.length > 0}style="display:none;"{/if}>

{if contexts.length > 0}
  <div style="float:right;">
       
    <a id="aboutClose"
       href="#"
       onclick="$('#aboutOpen').show();$('#aboutPop').hide();return false;">
       đóng</a>
       
  </div>
{/if}

<h3>Nhóm Là Gì?</h3>
<p>
Một <b>Nhóm</b> là một nơi chứa đựng các phương tiện cần thiết để làm xong các Công Việc cần làm. 
Bạn dùng Nhóm để tập hợp và phân loại các Công Việc của bạn.

<p>
Một vài Nhóm thường thấy là: máy vi tính, điện thoại, văn phòng, nhà cửa, tài chánh, mua sắm. 

<p>
Nếu dùng cho thương mại, các Nhóm có thể là: vận chuyển, điện thư, hóa đơn, thư từ...

<h3>Các Ví Dụ:</h3>
<p>
Nhóm 'mua sắm' có thể có các Công Việc như: mua sửa, mua cereal, mua thiệp mừng sinh nhật, mua bánh sinh nhật.

<p>
Nhóm 'máy vi tính' có thể có các Công Việc như: đặt vé máy bay đi dự hội nghị, đặt phòng khách sạn, đặt mua quà sinh nhật.

<p>
Nhóm 'vận chuyển' có thể có các Công Việc như: vận chuyển hàng bằng hãng fedex, gởi món hàng số 123 cho khách tên Jones, gởi món hàng 126 cho khách tên Smith.

<h3>Dùng Trong Các Trường Hợp Khác:</h3>
<p>
Nhóm có thể dùng cho các trường hợp khác như: 
lập kế hoạch, các công việc linh tinh, mua sắm, sức khỏe, xe hơi, làm vườn, các cuộc hẹn quan trọng, việc đang chờ giải quyết, nghiên cứu, thú vui.

</div>

You haven't created any Contexts yet.
<p>
Similar to a Project, a Context also lets you group and categorize Actions.  
<p>
A Context is a place where tools and resources are available to complete 
some Actions.  Example Contexts might be "computer & phone", "office", 
"house", "yard", "supermarket".
<p>
So, before your next trip to the "supermarket", you'll be able 
to see any Actions that you added to that Context, such as 
"buy milk", "buy cereal", "buy birthday card", "buy birthday cake".
<p>
For business usage, some interesting Contexts might be "ship", "fax", 
"invoice".  It's up to you!
<p>
Would you like to create a Context now?

Bạn chưa có lập một nhóm việc nào hết.<p>
Một nhóm việc đại diện cho một tập hợp các việc có liên quan 
với nhau, mà từ đó bạn có thể dễ dàng tìm kiếm và hoàn tất các 
công việc cần làm.
Ví dụ của Nhóm Việc có thể là "máy tính & điện thoại", "văn phòng", "sân sau nhà".<p>
Bạn có muốn tạo ra một Nhóm Việc bây giờ không?

${startFormTagLocal('context', 'update', context.id)}
 <h2>${t('Context')}: ${%linkToLocal(h(context.name), 'context', 'show', context.id, { 'style':colorStyle(context)})%}</h2>
 <div class="wide">
  <label for="context[name]" class="required">${t('Name')}:</label> ${%textField('context', 'name', {'style':colorStyle(context)})%} 
    ${errorMessagesOn('context', 'name')}<br/>
  <label for="context[notes]">${t('Notes')}:</label> ${%textArea('context', 'notes', { cols: 40, rows: 10, wrap: 'off' })%}<br/>
  {var validChoices = Context.parentChoices(context.id)}
  {if validChoices.length >= 2}
    <label for="context[parent_context_id]">${t('Parent Context')}:</label> ${select('context', 'parent_context_id', validChoices)}<br/>
  {/if}
  <label for="context[color]">${t('Color')}:</label> ${select('context', 'color', tChoices(colorChoices))}<br/>
  <div class="submit">
    ${submitButtonLocal("doUpdate", "  OK  ")}
    ${%linkToLocal(t('Cancel'), 'context', 'show', context.id, {'class':'text_link'})%}
  </div>
 </div>
${endFormTag()}

<div class="contexts">
  <h2>${t('Contexts')}</h2>
  
  <p style="margin: 7px;">
    {if contexts.length > 0}
      <div style="float:right;">
             
          <a id="aboutOpen"
             href="#"
             onclick="$('#aboutOpen').hide();$('#aboutPop').show();return false;" class="text_link">
             ${t('help')}</a>
             
      </div>
    {/if}

    ${%linkToLocal(t('Create a new Context'), 'context', 'newInstance', null, { 'class': 'button' })%}
  </p>

  ${render('context/about')}

  {if contexts.length > 0}
    <div style="margin-top: 5px;">
      <table class="hoverable" cellspacing="0" cellpadding="0">
      {for context in contexts}
        <tr>
          {if context.namePrefix == ''}
            <td nowrap width="300" class="topLevel">
               ${contextLink(res, context)}
          {else}
            <td nowrap width="300" class="subLevel">
               ${context.namePrefix}
               ${contextLink(res, context)}
          {/if}
            </td>
            <td>  </td>
            <td>${linkToLocal(t('edit'), 'context', 'edit', context.id)}</td>
            <td>  </td>
            <td>${%linkToLocal(t('delete'), 'context', 'destroy', context.id, { method: 'post', confirm: destroyConfirm(context) })%}</td>
            </tr>
      {/for}
      </table>
    </div>
  {/if}
</div>

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

<div class="form">
 <h2>${t('Context')}: <span style="${colorStyle(context)}">${h(context.name)}</span></h2>
 <table>
  <tr valign="top">
    <td class="label required">${t('Name')}: 
    </td>
    <td style="color: ${context.color};">${h(context.name)}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">${t('Notes')}: 
    </td>
    <td><pre>${h(context.notes)}</pre>
    </td>
  </tr>
  <tr>
    <td class="label">${t('Parent Context')}: 
    </td>
    <td>
      {if context.parent_context_id}
         {var parentContext = context.getParentContext()}
         ${linkToLocal(h(parentContext.name), 'context', 'show', context.parent_context_id, modelToolTip(parentContext, 'context', res))}
      {/if}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td class="buttons" style="padding-top: 10px;">
      ${%linkToLocal(t('Edit'), 'context', 'edit', context.id, { 'class': 'button' })%}
      ${%linkToLocal(t('Delete'), 'context', 'destroy', context.id, { method: 'post', confirm: destroyConfirmMessage, 'class': 'button' })%}
    </td>
  </tr>
 </table>
</div>

<div class="related">
  <hr/>
  {if actions.length > 0}
    ${render('action/indexBody')}
  {/if}
  <br/>
  ${startFormTagLocal('action', 'newInstance')}
    <input type="hidden" name="action[context_id]" id="action[context_id]" value="${context.id}">
    {if textLanguageFormat(res) == 1}
      ${%submitButtonLocal('doActionCreate', t('Add an Action to Context ') + TrimPath.junctionUtil.encodeQuotes(context.name))%}
    {else}
      ${%submitButtonLocal('doActionCreate', t('Add an Action to ') + TrimPath.junctionUtil.encodeQuotes(context.name) + ' Context')%}
    {/if}
  ${endFormTag()}
</div>

<div>
<h2>About Next Action</h2>
Next Action, Personal Edition, Version ${NEXT_ACTION_VERSION}
{if isDemoMode()}
  -- running in demo mode
{/if}
<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 projects
and action items.

<h3>Features:</h3>
<ul>
<li>Fast and snappy.</li>
<li>Easy to use.</li>
<li>Open source.</li>
<li>Works even if your network connection is offline, slow, or has hiccups.</li>
</ul>

<h3>Getting started:</h3>
{if isDemoMode()}
  You're running Next Action right now in <b>demo mode</b>.<p>

  The demo mode means that <b><i>any data you create will be deleted</i></b> 
  when you close your web browser.  To get out of demo mode,
  please <a href="http://gears.google.com/">install and enable Google Gears</a>
  right now and to get the full benefit 
  of Next Action, Personal Edition.
{else}
  Congratulations, you're already running a fully 
  enabled version of Next Action, Personal Edition right now.<p>

  To start from a clean database and delete all the existing data, click here: 
  <p>

     ${%linkToLocal('Delete All Records!', 'home', 'deleteAllRecords', null, { method: 'post', confirm: 'This operation is irreversible.  Are you sure you want to clear the entire database?', 'class': 'button' })%}
  <p>

  In this Personal Edition of Next Action, any data you create
  is stored locally on your computer.  That is, your records are
  not sent out over the network, but are instead kept
  in a fast Google Gears database on your computer.<p>

  Be sure to <b>setup a bookmark</b> to this page (or perhaps, more usefully,
  to the ${linkToLocal('Dashboard', 'home', 'dashboard')} page) so
  you can get back to Next Action conveniently.
{/if}

<h3>Software required:</h3>
Supported web browsers : Firefox 2.0+, IE 7+.<p>

<a href="http://gears.google.com/">Google Gears</a> : 
{if isDemoMode()}
  you'll need to <a href="http://gears.google.com/">install Google Gears</a>
  in order to use Next Action for more than just its 
  feature-limited demo mode.
{else}
  the Google Gears software is already installed on this computer
  and web browser.  When you tell your friends about Next Action,
  they'll need to install Google Gears on their own computers
  before they can use Next Action for themselves.
{/if}
<p>

<h3>Using Next Action:</h3>
Click around the links along the top to get a feel for the application.  The links above include...

<ul>
<li>
The ${linkToLocal('Dashboard', 'home', 'dashboard')} 
link gives you a concise overview of your active Actions.
</li>
<li>
The ${linkToLocal('Calendar', 'action', 'calender')} 
link shows your Actions in a Calendar display, based on when they're due.
</li>
<li>
The ${linkToLocal('Actions', 'action', 'index')} 
link lists all of your remaining Actions in more detail.
</li>
<li>
The ${linkToLocal('Contexts', 'context', 'index')} 
link lets you organize your Actions into different work areas.
</li>
<li>
The ${linkToLocal('Projects', 'project', 'index')} 
link lets you organize and group related Actions into larger Projects.
</li>
<li>
The ${linkToLocal('Completed', 'action', 'completed')} 
link lists all of your completed Actions -- how 
productive have you been?
</li>
<li>
The ${linkToLocal('Statistics', 'home', 'statistics')} 
link shows you an overview report of what's left to
do and of where you've been.
</li>
</ul>

<h3>To enter Actions:</h3>
Please use the 'Add a new Action' box on the right-hand-side of 
the page to record your own Actions.  The right-hand-side data
entry box always appears so you can quickly capture
those to-do ideas before you forget them.
<p>

You can also use the ${linkToLocal('detailed entry', 'action', 'newInstance')} 
link, also found on the right-hand-side of the page, to 
enter in lots of Action details.<p>

If you want to record a bunch of Actions in one fell
swoop, use the ${linkToLocal('bulk entry', 'action', 'newInstance')} 
link to enter in many Actions fast.  The 'bulk entry' link also 
appears on the right-hand-side of the page.

<h3>Action fields:</h3>
Each Action has the following fields, some optional, 
some of which you'll only see on the 'detailed entry' 
or Action edit screens...

  <dl style="padding-left: 1em;">
    <dt>Name</dt>
      <dd>Requried.  An Action's name is best when kept short, like 'buy milk at costco', or 'upgrade iPhone plan'.</dd>
    <dt>Notes</dt>
      <dd>Optional, for recording more information or notes about an Action.</dd>
    <dt>Color</dt>
      <dd>Optional, because some Actions just need to look <font color="red">red</font>.</dd>
    <dt>Active at</dt>
      <dd>Optional.  Sometimes you just don't want to worry about 
          an Action until later, such as 'two weeks later'.  
          When you specify an 'Active at' date,
          you're telling the program to not show the Action on your 
          Dashboard until the 'Active at' date has occurred.  
          To make this filtering work, 
          you also have to make a filtering choice in the "show actions for" 
          dropdown box, which you'll find at the bottom of the Dashboard page.</dd>
    <dt>Due at</dt>
      <dd>Optional.  This field lets you record a deadline date for an Action.  But when you 
          update new date or drag action in calendar, its date should be the same today date or late one.</dd>
    <dt>Completed at</dt>
      <dd>Whenever you mark an Action as done or complete, 
          the program will remember the date of completion in this field.  
          After an Action is completed, it is only listed on the 
          ${linkToLocal('Completed', 'action', 'completed')} page.
    <dt>Repeat</dt>
      <dd>Optional.  The Repeat field lets you specify a repeating or 
          recurring Action, such as buying a birthday card 
          every year for someone.  The Repeat feature kicks in whenever
          you complete an Action.  If a just-completed Action has Repeat
          information on it, the program will automatically create
          a brand new Action that's a clone of the completed Action,
          with the right dates automatically filled in.</dd>
  </dl>

You can also associate an Action with a Project.  For example,
the 'hire Luxe Limos' Action can be associated with a 'Wedding' Project.

You can also associate an Action with a Context.  For example,
the 'research Wii prices' Action can be associated with 
a 'Computer & Phone' Context.

You can always edit your Actions later, too, to change any
of these fields and associations at any time.<p>

<h3>Backups:</h3>
To make backups of your local database files, please copy the 
relevant database files as described by the 
<a href="http://code.google.com/apis/gears/api_database.html#directories">
Google Gears database file locations</a> documentation.

<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>

<div>
<h2>Vài nét về Next Action</h2>
Next Action, Loại Dùng Cho Cá Nhân, Phiên Bản số ${NEXT_ACTION_VERSION}
{if isDemoMode()}
  -- đang chạy ở trạng thái chạy thử
{/if}
<p>

Next Action là một chương trình liệt kê và theo dõi để giúp bạn 
<a href="http://trimpath.com/project/wiki/GettingThingsDone">Làm Xong Việc</a> nhanh chóng.  
Chương trình này giống như một người phụ tá giúp đỡ bạn làm việc có hiệu suất cao và hoàn tất 
các công việc bạn cần làm đúng thời gian đã định.

<h3>Các Đặc Điểm:</h3>
<ul>
<li>Chạy nhanh gọn.</li>
<li>Dễ sử dụng.</li>
<li>Code có thể coi được.</li>
<li>Chương trình chạy ngay cả khi internet bị mất, bị chậm hay có lúc chạy lúc không.</li>
</ul>

<h3>Những Điều Cần Làm:</h3>
{if isDemoMode()}
  Bạn đang chạy Next Action ở trạng thái <b>chạy thử</b>.<p>

  Trạng thái chạy thử có nghĩa là <b><i>bất kỳ dữ liệu nào mà bạn đánh vào máy sẽ bị xóa</i></b> 
  khi bạn đóng web browser.  Muốn ra khỏi trạng thái chạy thử,
  ngay bây giờ bạn hãy <a href="http://gears.google.com/">cài đặt và cho phép Google Gears chạy</a>
  để có thể sử dụng toàn bộ chức năng của Next Action, Loại Dùng Cho Cá Nhân.
{else}
  Chúc mừng, chúc mừng, bạn đã cài đặt xong nhu liệu cần thiết để Next Action, Loại Dùng Cho Cá Nhân, 
  có thể chạy không bị giới hạn một số chức năng của nó.<p>

  Bây giờ, bạn phải nhấn nút <i>Xóa Hết Dữ Liệu!</i> ở dưới để xóa tất cả các dữ liệu được tạo sẵn để lập kế hoạch mới cho riêng bạn: 
  <p>

     ${%linkToLocal(t('Delete All Records!'), 'home', 'deleteAllRecords', null, { method: 'post', confirm: t('This operation is irreversible.  Are you sure you want to clear the entire database?'), 'class': 'button' })%}
  <p>

  Phiên bản Next Action này là loại dùng cho cá nhân.  Vì vậy, bất kỳ dữ liệu nào bạn tạo ra được lưu trữ 
  trên máy tính của bạn.  Các dữ liệu của bạn sẽ không bị gởi ra bên ngoài, nhưng sẽ được lưu trữ trong 
  chương trình chạy nhanh của Google Gears trong máy tính của bạn.<p>

  Hãy chắc chắn bạn <b>bookmark trang này</b> (hoặc tốt hơn, và tiện lợi hơn, là bạn bookmark trang ${linkToLocal(t('Dashboard'), 'home', 'dashboard')}) 
  để bạn có thể mở lại Next Action một cách dễ dàng hơn.
{/if}

<h3>Phần mềm cần thiết để chạy:</h3>
Web browsers chạy được Next Action là: Firefox 2.0+, IE 7+.<p>

<a href="http://gears.google.com/">Google Gears</a> : 
{if isDemoMode()}
  bạn cần <a href="http://gears.google.com/">cài đặt Google Gears</a>
  để dùng chung với Next Action nếu bạn muốn dùng thêm các chức năng khác bị 
  giới hạn do chạy trong trạng thái chạy thử.
{else}
  phần mềm Google Gears đã được cài đặt trong máy tính này và web browser.  
  Khi bạn giới thiệu bạn bè về Next Action, bạn hãy nói cho họ biết là họ 
  cần cài đặt phần mềm Google Gears trên máy của họ trước khi chạy Next Action 
  cho những kế hoạch của họ.
{/if}
<p>

<h3>Cách Dùng Next Action:</h3>
Nhấn chuột vào những điểm kết nối hàng ngang ở trên đầu để làm quen với các chức năng của chương trình.  Các kết nối ở trên bao gồm...

<ul>
<li>
${linkToLocal(t('Dashboard'), 'home', 'dashboard')} 
cho bạn thấy rõ một cách tổng quát những Công Việc đang cần làm.
</li>
<li>
${linkToLocal(t('Actions'), 'action', 'index')} 
liệt kê những Công Việc còn lại.
</li>
<li>
${linkToLocal(t('Projects'), 'project', 'index')} 
giúp bạn sắp xếp và gộp lại những Công Việc có liên quan với nhau thành những Đê Án lớn hơn.
</li>
<li>
${linkToLocal(t('Contexts'), 'context', 'index')} 
để bạn sắp xếp các Công Việc gần giống nhau vào những nhóm công việc.
</li>
<li>
${linkToLocal(t('Completed'), 'action', 'completed')} 
liệt kê tất cả những Công Việc bạn đã làm xong -- bạn có thấy rằng bạn đã làm được nhiều việc hơn và nhanh hơn không?
</li>
<li>
${linkToLocal(t('Statistics'), 'home', 'statistics')} 
cho bạn thấy số công việc còn lại cần làm và bạn đang ở chỗ nào trong kế hoạch của bạn.
</li>
</ul>

<h3>Cách bỏ công việc cần làm vào Next Action:</h3>
Bạn hãy dùng chỗ  '${t('Add a new Action')}' ở góc bên phải của trang để ghi 
vào máy Các Công Việc cần làm của bạn.  Khung ghi công việc cần làm này luôn luôn được thấy và 
nằm phía bên phải để bạn có thể ghi vào máy ngay công việc cần làm trước khi bạn quên mất.
<p>

Bạn có thể dùng kết nối ${linkToLocal(t('detailed entry'), 'action', 'newInstance')} 
ở phía bên phải của trang để ghi vào máy Công Việc cần làm chi tiết hơn.<p>

Nếu bạn muốn ghi vào máy một loạt các Công Việc cần làm cùng một lúc, bạn có thể dùng kết nối 
${linkToLocal(t('bulk entry'), 'action', 'newInstance')} để điền vào nhanh hơn.  Kết nối 
'${t('bulk entry')}' cũng luôn xuất hiện bên phải của trang.

<h3>Chi tiết Công Việc:</h3>
Mỗi Công Việc đều có các phần sau đây, nhưng một vài phần không bắt buộc bạn điền vào.  
Và cũng có một vài chi tiết bạn chỉ có thể thấy ở '${t('detailed entry')}' hoặc ở 
trang bạn sửa Công Việc mà thôi.

  <dl style="padding-left: 1em;">
    <dt>${t('Name')}</dt>
      <dd>Bắt buộc phải điền vào.  Tốt nhất là tên Công Việc phải ngắn gọn, như là 'mua sửa ở costco', hoặc 'mua xe mới'.</dd>
    <dt>${t('Notes')}</dt>
      <dd>Có thể để trống, dùng để ghi thêm chi tiết hay những thông tin cần thiết dùng cho Công Việc cần làm.</dd>
    <dt>${t('Color')}</dt>
      <dd>Có thể để trống, nhưng để phân biệt với các Công Việc khác, bạn có thể dùng màu sắc như là màu <font color="red">đỏ</font>.</dd>
    <dt>${t('Active at')}</dt>
      <dd>Có thể để trống.  Đôi khi, bạn không cần phải lo lắng phải làm một công việc nào đó cho đến một thời điểm nào đó
          trong tương lai, chẳng hạn như 'hai tuần sau' mới làm.  Khi bạn điền ngày tháng vào 'Bắt đầu' làm, 
          tức là bạn báo cho chương trình biết là không được cho Công Việc này xuất hiện trong '${t('Dashboard')}' cho đến khi 
          thời gian '${t('Active at')}' đến.  Để phần này được chạy, bạn cần phải chọn trong '${t('show actions for')}' nằm ở 
          gần cuối trang '${t('Dashboard')}'.</dd>
    <dt>${t('Due at')}</dt>
      <dd>Có thể để trống.  Phần này cho bạn biết ngày nào là hạn chót Công Việc phải làm xong.  Nhưng một khi bạn muốn sửa đổi để công việc đó ph�