groups: added group acl features

circle/dashboard/templates/dashboard/group-detail.html

 {% extends "dashboard/base.html" %}
 {% load i18n %}
-{% load render_table from django_tables2 %}
-{% block content %}
-
-<div class="alert alert-info">
-  Tip #1: you can select multiple vm instances while holding down the <strong>CTRL</strong> key!
-</div>
-
-<div class="alert alert-info">
-  Tip #2: if you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!
-</div>
 
-<div class="row">
-  <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-user"></i> Your users</h3>
+{% block content %}
+<div class="body-content">
+  <div class="page-header">
+    <h1>
+      <div id="group-details-rename">
+        <form action="" method="POST" id="group-details-rename-form">
+          {% csrf_token %}
+          <input id="group-details-rename-name" class="form-control" name="new_name" type="text" value="{{ group.name }}"/> 
+          <button type="submit" id="group-details-rename-submit" class="btn">{% trans "Rename" %}</button>
+        </form>
       </div>
-      <div class="panel-body group-list-group-control">
-        <p>
-          <strong>Group actions</strong>
-          <button id="group-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
-          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
-        </p>
-	</div>
-	<div id="table_container">
-	
-        <div id="rendered_table" class="panel-body">
-	      {% render_table table %}
+      <div id="group-details-h1-name">
+        {{ group.name }} 
+      </div>
+      </h1>
+  </div>
+  <div class="row">
+    <div class="col-md-4" id="group-info-pane">
+      <div class="big">
+        <div class="btn-group">
+          <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#" class="group-details-rename-button"><i class="icon-pencil"></i> Rename</a></li>
+             <li><a data-group-pk="{{ group.pk }}" class="group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-remove"></i> Discard</a></li>
+</ul>
         </div>
       </div>
     </div>
-  </div>
-</div>
-<style>
-  .popover {
-    max-width: 600px;
-  }
-
-  .group-list-selected, .group-list-selected td {
-    background-color: #e8e8e8 !important;
-  }
+    <div class="col-md-8" id="group-detail-pane">
+      <div class="panel panel-default" id="group-detail-panel">
+        <div class="tab-content panel-body">
 
-  .group-list-selected:hover, .group-list-selected:hover td {
-    background-color: #d0d0d0 !important;
-  }
+<h3>{% trans "User list"|capfirst %}</h3>
+<table class="table table-striped table-with-form-fields">
+    <tbody>
+     <thead><tr><th></th><th>{% trans "Who" %}</th><th></th><th></th></tr></thead>
+        {% for i in users %}
+	<tr><td><i class="icon-user"></i></td><td>{{i.username}}</td>
+		<td><a data-group-pk="{{ i.pk }}" href="#" class="real-link groupuser-delete btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+        {% endfor %}
+        <tr><td><i class="icon-plus"></i></td>
+            <td><input type="text" class="form-control" name="perm-new-name"
+                placeholder="{% trans "Name of group or user" %}"></td>
+        </tr>
+  </tbody>
+  </table>
 
-  .group-list-selected td:first-child {
-    font-weight: bold;
-  }
+<h3>{% trans "Permissions"|capfirst %}</h3>
+  <form action="{{acl.url}}" method="post">{% csrf_token %}
+  <table class="table table-striped table-with-form-fields">
+    <thead><tr><th></th><th>{% trans "Who" %}</th><th>{% trans "What" %}</th><th></th></tr></thead>
+    <tbody>
+        {% for i in acl.users %}
+        <tr><td><i class="icon-user"></i></td><td>{{i.user}}</td>
+            <td><select class="form-control" name="perm-u-{{i.user.id}}">
+                    {% for id, name in acl.levels %}
+                    <option{%if id = i.level%} selected="selected"{%endif%} value="{{id}}">{{name}}</option>
+                    {% endfor %}
+            </select></td>
+            <td class="user-remove"><a href="#" class="btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td></tr>
+        {% endfor %}
+        <tr><td><i class="icon-plus"></i></td>
+            <td><input type="text" class="form-control" name="perm-new-name"
+                placeholder="{% trans "Name of group or user" %}"></td>
+            <td><select class="form-control" name="perm-new">
+                    {% for id, name in acl.levels %}
+                    <option value="{{id}}">{{name}}</option>
+                    {% endfor %}
+            </select></td><td></td>
+        </tr>
+  </tbody>
+  </table>
+	  <textarea class="form-control"></textarea>
 
-  .group-list-table-thin {
-    width: 10px;
-  }
+  <div class="form-actions panel-body">
+    <button type="submit" class="btn btn-success">{% trans "Save" %}</button>
+  </div>
+  </form>
 
-  .group-list-table-admin {
-    width: 130px;
-  }
-</style>
-{% endblock %}
 
-{% block extra_js %}
-<script src="{{ STATIC_URL}}dashboard/group-list.js"></script>
+	</div>
+     </div>
+    </div>
+  </div>
+</div>
+<script src="{{ STATIC_URL}}dashboard/group-details.js"></script>
 {% endblock %}

circle/dashboard/templates/dashboard/group-list/column-actions.html

-
-<div class="btn-group">
-	<button type="button" class="btn {{ btn_size }} btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
-  <ul class="dropdown-menu" role="menu">
-   <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i> Delete</a></li>
-    </ul>
-</div>
+   <a data-group-pk="{{ record.pk }}" class="btn btn-danger btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i></a>

circle/dashboard/templates/dashboard/group-list/column-id.html

-<div id="node-{{ record.pk }}">{{ record.pk }}</div>
+<div id="group-{{ record.pk }}">{{ record.pk }}</div>

circle/dashboard/templates/dashboard/index-groups.html

 <div class="panel panel-default">
   <div class="panel-heading">
-    <ul class="list-inline pull-right">
-      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
-      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
-    </ul>
-    <h3 class="no-margin"><i class="icon-group"></i> Groups
-    </h3>
-  </div>
+   <div class="pull-right toolbar">
+      <span class="btn btn-default btn-xs infobtn" title="Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.  "><i class="icon-info-sign"></i></span>
+</div> 
+<h3 class="no-margin"><i class="icon-group"></i> Groups
+</h3>
+ 
+</div>
   <div class="list-group" id="vm-list-view">
      {% for i in groups %}
      <a href="{% url "dashboard.views.group-detail" pk=i.pk %}" class="list-group-item real-link">