<!DOCTYPE html>
<html>
  <head>
    <title>Hamster Remote control</title>
    <link rel="stylesheet" href="/media/css/jquery.mobile-1.0a3pre.min.css" />
	<script type="text/javascript" src="/media/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/media/js/jquery.mobile-1.0a3pre.min.js"></script>
  </head>

  <body>

    <div data-role="page">
      <div data-role="header" data-nobackbtn="true">
        <h1>
          % if current_fact:
              ${current_fact['name']} ${current_fact['duration']}
          % else:
              No activity
          % endif
        </h1>
      </div>

      <div data-role="content">
        <form method="post" action="/">
          <fieldset>
            <div data-role="fieldcontain">
              <select name="activity-select" id="activity-select">
                <option data-placeholder="true">Choose activity...</option>
                % for activity in activities:
                    <option value="${activity}">${activity}</option>
                % endfor
              </select>
            </div>
          </fieldset>
          <fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="submit" name="action" value="start">Start</button></div>
            <div class="ui-block-b"><button type="submit" name="action" value="stop">Stop</button></div>
          </fieldset>
        </form>

        <h3>Today:</h3>
        <table>
          % for fact in facts:
              <tr>
                <td>
                  ${fact['start_time']} -
                  % if fact['end_time']:
                      ${fact['end_time']}
                  % endif
                </td>
                <td>${fact['name']}</td>
                <td>${fact['duration']}</td>
              </tr>
          % endfor
        </table>

      </div>

      <div data-role="footer">
        <h4>Total: ${total}</h4>
      </div>

    </div>

  </body>
</html>
