{% load i18n %}
<!--<h3>
  <a id="timers-pointer" href="javascript:JS_toggleSection('timers');" class="toggled-section">{% trans "Timer" %}</a>
</h3>
-->

{% if account.get_timers %}
<div id="timers" class="timer-list">
  <table class="timer-table">
    <tbody>
      {% for timer in account.get_timers %}
      <script type="text/javascript">
	function updatedisplay{{ timer.id }}(watch) {
        document.getElementById('watchdisplay-{{ timer.id }}').innerHTML = watch{{ timer.id }}.toString();
	}
	var watch{{ timer.id }} = new Stopwatch(updatedisplay{{ timer.id }}, 50);
	watch{{ timer.id }}.setElapsed(0, 0, {{ timer.get_elapsed_time }});
      </script>
      <tr id="timer-row-{{ timer.id }}">
        <td width="12px">
          {% if timer.is_active %}
          <span id="timer-image-{{ timer.id }}" class="sprite timer"></span>
          {% else %}
          <span id="timer-image-{{ timer.id }}" class="sprite timer_disabled"></span>
          {% endif %}
        </td>
        <!--
           <td width="11px">
             <span id="edit-image-{{ timer.id }}" onclick="javascript:JS_editTimerMessage({{ timer.id }}, '{{ timer.title }}');" class="sprite note"></span>
           </td>
           -->
        <td>
          <span id="timer-title-{{ timer.id }}" onclick="javascript:JS_editTimerMessage({{ timer.id }}, '{{ timer.title }}');">{{ timer.title|truncatewords:3 }}</span>
          <div id="timer-message-{{ timer.id }}"style="display:none;"></div>
        </td>
        {% if timer.is_active %}
        <script type="text/javascript">
          watch{{ timer.id }}.start();
        </script>
        <td width="12px">
          <span id="start-image-{{ timer.id }}" class="sprite start_disabled"></span>
        </td>
        <td width="12px">
          <span title="{% trans "pause" %}" id="pause-image-{{ timer.id }}" onclick="javascript:JS_pauseTimer({{ timer.id }});" class="sprite pause"></span>
        </td>
        {% else %}
        <td width="12px">
          <span title="{% trans "start" %}" id="start-image-{{ timer.id }}" onclick="javascript:JS_startTimer({{ timer.id }});" class="sprite start"></span>
        </td>
        <td width="12px">
          <!--<span id="pause-image-{{ timer.id }}" class="sprite pause_disabled"></span>-->
          <span id="pause-image-{{ timer.id }}" onclick="javascript:JS_clearTimer({{ timer.id }});" class="sprite stop"></span>
        </td>
        {% endif %}
        <td width="12px">
          {% if not timer.is_active %}
          <!--<span title="{% trans "clear" %}" onclick="javascript:JS_clearTimer({{ timer.id }});" id="stop-image-{{ timer.id }}" class="sprite stop"></span>-->
          <span title="{% trans "remove" %}" onclick="javascript:JS_removeTimer({{ timer.id }});" id="stop-image-{{ timer.id }}" class="sprite remove"></span>
          {% else %}
          <span title="{% trans "clear" %}" style="display:none;" onclick="javascript:JS_clearTimer({{ timer.id }});" id="stop-image-{{ timer.id }}" class="sprite stop"></span>
          {% endif %}
        </td>
        <td>
          <span id="watchdisplay-{{ timer.id }}" onclick="{% if not timer.is_active %}javascript:JS_applyTimer({{ timer.id }});{% endif %}">
            <script type="text/javascript">
              document.getElementById('watchdisplay-{{ timer.id }}').innerHTML = watch{{ timer.id }}.toString();
            </script>
          </span>
        </td>
      </tr>
      {% empty %}
      <td>
        <span id="timer-image-{{ timer.id }}" class="sprite timer"></span>
      </td>
      <td>
        {% trans "No timers found" %}
      </td>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{%if user%}
  <div style="display:none;">
    <form method="POST" action="/edit_timer" id="timer-message-form">
      <div>
        <input id="title" type="text" name="title" maxlength="255" size="12" />
      </div>
      <input type="hidden" name="message_only" value="1" />
      <input type="hidden" name="timer_id" value="" />
      <input type="submit" value="{% trans "Save" %}" />
      <input type="button" value="{% trans "Discard" %}" name="discard" />
    </form>
  </div>
{%endif%}
