<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{_("cyclone web server")}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    
    <script>
        edit = function(id){console.log("edit "+ id); }
        remove = function(id){console.log("delete" + id); }
    </script>

  </head>

  <body>
    <div class="container">
      <div class="content">
        <div class="row">
            <h2>User Administration</h2>
            <table class="table table-striped table-condensed">
                <thead>
                    <tr><td>id</td><td>username</td><td>Edit</td><td>Remove</td></tr>
                </thead>
                <tbody>
                    {% for user, id in users %}
                <tr>
                    <td>{{id}}</td>
                    <td>{{user}}</td>
                  <td><i class="icon-edit" onclick="edit(id);"></i></td>
                  <td><i class="icon-remove" onclick="remove(id);"></i></td>
              </tr>
                  {% end %}
              </tbody>
            </table>
        </div>
      </div>
    </div>
</body>
</html>
