Redesign user management templates

flaskbb/themes/aurora/src/flaskbb.scss

@@ -27,8 +27,8 @@ $navigation-background-color: #f8f8f8;
 $panel-background: #fff;            // panel body background
 $panel-head-background: #f5f5f5;    // panel head background
 $panel-meta-background: #e8f1f2;    // panel meta background
-$panel-meta-border: $border-color;  // panel meta (bottom) border
+$panel-meta-border: #cad7e1;  // panel meta (bottom) border
-$panel-border: $border-color;       // panel border (all over)
+$panel-border: #cad7e1;       // panel border (all over)
 $panel-hover: #f8f8f8;
 
 $page-panel: $panel-background;
@@ -171,10 +171,10 @@ body {
 
 
 // default values for the panels
-.category-panel, .forum-panel, .topic-panel, .page-panel, .conversation-panel {
+.category-panel, .forum-panel, .topic-panel, .page-panel, .conversation-panel, .management-panel {
     border: 1px solid $panel-border;
     border-radius: 0;
-    .category-head, .forum-head, .topic-head, .page-head, .conversation-head {
+    .category-head, .forum-head, .topic-head, .page-head, .conversation-head, .management-head {
         background-color: $panel-head-background;
         font-weight: bold;
     }
@@ -581,6 +581,54 @@ body {
     padding-top: 2em;
 }
 
+// Management Panel
+.management-panel {
+
+    .search-form {
+        display: none;
+        padding: 15px;
+    }
+    .management-head {
+        border-radius: 0;
+        background-color: $blue;
+    }
+    .management-body {
+        border-radius: 0;
+        padding: 0;
+        .panel.settings-panel {
+            border-right: 0;
+            border-top: 0;
+            border-bottom: 0;
+            border-radius: 0;
+            margin-bottom: 0;
+            border-left: 1px solid $border-color;
+
+            .settings-head {
+                border-radius: 0;
+                background-color: $panel-hover;
+                border-bottom: 1px solid $border-color;
+            }
+            .settings-body {
+                padding: 0px;
+                padding-top: 10px;
+                .settings-search {
+                    margin-top: -10px;
+                }
+            }
+
+            .settings-footer {
+                padding-top: 5px;
+                padding-left: 5px;
+                padding-bottom: 0px;
+                .pagination {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+
 p.flaskbb-stats {
     margin: 0;
     padding: 0;
@@ -601,6 +649,10 @@ p.flaskbb-stats {
     padding: 0;
 }
 
+.settings-col {
+    padding: 0;
+}
+
 .inline-form {
     display: inline;
     padding: 0;
@@ -742,6 +794,84 @@ p.flaskbb-stats {
     }
 }
 
+.nav-sidebar {
+    width: 100%;
+    padding: 0;
+    a {
+        color: $navigation-font-color;
+        border-radius: 0;
+    }
+    .active a {
+        cursor: default;
+        background-color: $navigation-background-color;
+        color: $navigation-font-color;
+    }
+
+    li.active {
+        border-top: 1px solid $border-color;
+        border-bottom: 1px solid $border-color;
+        &:first-child {
+            border-top: none;
+        }
+    }
+    .active a:hover {
+        background-color: $navigation-background-color;
+    }
+}
+
+
+/* Panel tabs */
+.panel {
+    &.panel-tabs {
+        > .panel-heading {
+            padding: 0;
+            font-weight: 500;
+        }
+        .nav-tabs {
+            border-bottom: none;
+        }
+        .nav-justified {
+            margin-bottom: -1px;
+        }
+    }
+}
+
+.panel-tabs {
+    .nav-tabs {
+        &.nav-justified > li > a {
+            border-radius: 0;
+            border-top: none;
+            border-bottom: 1px solid $border-color;
+        }
+        // non-active and hover
+        > li {
+            > a {
+                color: $header-subtitle-font-color;
+                // different background color when hovering
+                &:hover, &:focus {
+                    background-color: $fresh-blue;
+                    border-color: transparent;
+                    border-top: none;
+                    border-bottom: 1px solid $border-color;
+                }
+            }
+        }
+        // active and hover
+        > li.active {
+            > a, a:hover, a:focus {
+                color: $header-title-font-color;
+                background-color: $fresh-blue;
+                border-color: $border-color;
+                border-bottom-color: transparent;
+                border-top: none;
+                border-left: none;
+                border-right: none;
+                border-bottom: 1px solid $border-color;
+            }
+        }
+    }
+}
+
 
 /* Markdown Editor */
 .editor-box .editor-submit .btn {

flaskbb/themes/aurora/static/css/flaskbb.css

@@ -67,22 +67,22 @@ body {
   border: 1px solid #cad7e1;
   border-radius: 0; }
 
-.category-panel, .forum-panel, .topic-panel, .page-panel, .conversation-panel {
+.category-panel, .forum-panel, .topic-panel, .page-panel, .conversation-panel, .management-panel {
   border: 1px solid #cad7e1;
   border-radius: 0; }
-  .category-panel .category-head, .category-panel .forum-head, .category-panel .topic-head, .category-panel .page-head, .category-panel .conversation-head, .forum-panel .category-head, .forum-panel .forum-head, .forum-panel .topic-head, .forum-panel .page-head, .forum-panel .conversation-head, .topic-panel .category-head, .topic-panel .forum-head, .topic-panel .topic-head, .topic-panel .page-head, .topic-panel .conversation-head, .page-panel .category-head, .page-panel .forum-head, .page-panel .topic-head, .page-panel .page-head, .page-panel .conversation-head, .conversation-panel .category-head, .conversation-panel .forum-head, .conversation-panel .topic-head, .conversation-panel .page-head, .conversation-panel .conversation-head {
+  .category-panel .category-head, .category-panel .forum-head, .category-panel .topic-head, .category-panel .page-head, .category-panel .conversation-head, .category-panel .management-head, .forum-panel .category-head, .forum-panel .forum-head, .forum-panel .topic-head, .forum-panel .page-head, .forum-panel .conversation-head, .forum-panel .management-head, .topic-panel .category-head, .topic-panel .forum-head, .topic-panel .topic-head, .topic-panel .page-head, .topic-panel .conversation-head, .topic-panel .management-head, .page-panel .category-head, .page-panel .forum-head, .page-panel .topic-head, .page-panel .page-head, .page-panel .conversation-head, .page-panel .management-head, .conversation-panel .category-head, .conversation-panel .forum-head, .conversation-panel .topic-head, .conversation-panel .page-head, .conversation-panel .conversation-head, .conversation-panel .management-head, .management-panel .category-head, .management-panel .forum-head, .management-panel .topic-head, .management-panel .page-head, .management-panel .conversation-head, .management-panel .management-head {
     background-color: #f5f5f5;
     font-weight: bold; }
-  .category-panel > .panel-heading, .forum-panel > .panel-heading, .topic-panel > .panel-heading, .page-panel > .panel-heading, .conversation-panel > .panel-heading {
+  .category-panel > .panel-heading, .forum-panel > .panel-heading, .topic-panel > .panel-heading, .page-panel > .panel-heading, .conversation-panel > .panel-heading, .management-panel > .panel-heading {
     color: #333;
     background-color: #f5f5f5;
     border-color: #cad7e1; }
-  .category-panel > .panel-heading + .panel-collapse > .panel-body, .forum-panel > .panel-heading + .panel-collapse > .panel-body, .topic-panel > .panel-heading + .panel-collapse > .panel-body, .page-panel > .panel-heading + .panel-collapse > .panel-body, .conversation-panel > .panel-heading + .panel-collapse > .panel-body {
+  .category-panel > .panel-heading + .panel-collapse > .panel-body, .forum-panel > .panel-heading + .panel-collapse > .panel-body, .topic-panel > .panel-heading + .panel-collapse > .panel-body, .page-panel > .panel-heading + .panel-collapse > .panel-body, .conversation-panel > .panel-heading + .panel-collapse > .panel-body, .management-panel > .panel-heading + .panel-collapse > .panel-body {
     border-top-color: #cad7e1; }
-  .category-panel > .panel-heading .badge, .forum-panel > .panel-heading .badge, .topic-panel > .panel-heading .badge, .page-panel > .panel-heading .badge, .conversation-panel > .panel-heading .badge {
+  .category-panel > .panel-heading .badge, .forum-panel > .panel-heading .badge, .topic-panel > .panel-heading .badge, .page-panel > .panel-heading .badge, .conversation-panel > .panel-heading .badge, .management-panel > .panel-heading .badge {
     color: #f5f5f5;
     background-color: #333; }
-  .category-panel > .panel-footer + .panel-collapse > .panel-body, .forum-panel > .panel-footer + .panel-collapse > .panel-body, .topic-panel > .panel-footer + .panel-collapse > .panel-body, .page-panel > .panel-footer + .panel-collapse > .panel-body, .conversation-panel > .panel-footer + .panel-collapse > .panel-body {
+  .category-panel > .panel-footer + .panel-collapse > .panel-body, .forum-panel > .panel-footer + .panel-collapse > .panel-body, .topic-panel > .panel-footer + .panel-collapse > .panel-body, .page-panel > .panel-footer + .panel-collapse > .panel-body, .conversation-panel > .panel-footer + .panel-collapse > .panel-body, .management-panel > .panel-footer + .panel-collapse > .panel-body {
     border-bottom-color: #cad7e1; }
 
 .category-body, .forum-body, .topic-body, .page-body, .conversation-body {
@@ -324,6 +324,38 @@ body {
 .conversation-reply {
   padding-top: 2em; }
 
+.management-panel .search-form {
+  display: none;
+  padding: 15px; }
+.management-panel .management-head {
+  border-radius: 0;
+  background-color: #337ab7; }
+.management-panel .management-body {
+  border-radius: 0;
+  padding: 0; }
+  .management-panel .management-body .panel.settings-panel {
+    border-right: 0;
+    border-top: 0;
+    border-bottom: 0;
+    border-radius: 0;
+    margin-bottom: 0;
+    border-left: 1px solid #cad7e1; }
+    .management-panel .management-body .panel.settings-panel .settings-head {
+      border-radius: 0;
+      background-color: #f8f8f8;
+      border-bottom: 1px solid #cad7e1; }
+    .management-panel .management-body .panel.settings-panel .settings-body {
+      padding: 0px;
+      padding-top: 10px; }
+      .management-panel .management-body .panel.settings-panel .settings-body .settings-search {
+        margin-top: -10px; }
+    .management-panel .management-body .panel.settings-panel .settings-footer {
+      padding-top: 5px;
+      padding-left: 5px;
+      padding-bottom: 0px; }
+      .management-panel .management-body .panel.settings-panel .settings-footer .pagination {
+        margin: 0; }
+
 p.flaskbb-stats {
   margin: 0;
   padding: 0; }
@@ -339,6 +371,9 @@ p.flaskbb-stats {
   margin: 0;
   padding: 0; }
 
+.settings-col {
+  padding: 0; }
+
 .inline-form {
   display: inline;
   padding: 0; }
@@ -441,6 +476,54 @@ p.flaskbb-stats {
     color: #777;
     background-color: #e7e7e7; }
 
+.nav-sidebar {
+  width: 100%;
+  padding: 0; }
+  .nav-sidebar a {
+    color: #555;
+    border-radius: 0; }
+  .nav-sidebar .active a {
+    cursor: default;
+    background-color: #f8f8f8;
+    color: #555; }
+  .nav-sidebar li.active {
+    border-top: 1px solid #cad7e1;
+    border-bottom: 1px solid #cad7e1; }
+    .nav-sidebar li.active:first-child {
+      border-top: none; }
+  .nav-sidebar .active a:hover {
+    background-color: #f8f8f8; }
+
+/* Panel tabs */
+.panel.panel-tabs > .panel-heading {
+  padding: 0;
+  font-weight: 500; }
+.panel.panel-tabs .nav-tabs {
+  border-bottom: none; }
+.panel.panel-tabs .nav-justified {
+  margin-bottom: -1px; }
+
+.panel-tabs .nav-tabs.nav-justified > li > a {
+  border-radius: 0;
+  border-top: none;
+  border-bottom: 1px solid #cad7e1; }
+.panel-tabs .nav-tabs > li > a {
+  color: #E8F1F2; }
+  .panel-tabs .nav-tabs > li > a:hover, .panel-tabs .nav-tabs > li > a:focus {
+    background-color: #0088cc;
+    border-color: transparent;
+    border-top: none;
+    border-bottom: 1px solid #cad7e1; }
+.panel-tabs .nav-tabs > li.active > a, .panel-tabs .nav-tabs > li.active a:hover, .panel-tabs .nav-tabs > li.active a:focus {
+  color: #fff;
+  background-color: #0088cc;
+  border-color: #cad7e1;
+  border-bottom-color: transparent;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid #cad7e1; }
+
 /* Markdown Editor */
 .editor-box .editor-submit .btn {
   margin: 0.75em 0.25em 0 0; }

flaskbb/themes/aurora/templates/layout.html

@@ -151,7 +151,7 @@
 
                 <!-- Place for all the (flashed) messages -->
                 {% block messages %}
-                <div class="flashed-messages">
+                <div id="flashed-messages">
                     {% include theme('flashed_messages.html') %}
                 </div>
                 {% endblock %}

flaskbb/themes/aurora/templates/management/banned_users.html

@@ -0,0 +1,133 @@
+{% set page_title = _("Banned Users") %}
+{% set active_management_user_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% block breadcrumb %}
+<ol class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_pagination, group_field,navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.users', _("Manage Users")) }}
+            {{ navlink('management.banned_users', _('Banned Users')) }}
+
+            {% if current_user|is_admin %}
+                {{ navlink('management.add_user', _("Add User")) }}
+            {% endif %}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel">
+        <div class="panel-heading settings-head">
+
+            <span class="fa fa-user-times"></span> {% trans %}Banned Users{% endtrans %}
+
+            <div class="pull-right action-buttons">
+                <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-default btn-xs" onclick="return show_management_search()">
+                        <span class="fa fa-search" style="margin-right: 0px;"></span> {% trans %}Search{% endtrans %}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+        <div class="panel-body settings-body">
+
+            <div class="settings-search">
+                <form class="search-form" role="form" method="post">
+                    {{ search_form.hidden_tag() }}
+                    <div class="input-group">
+                        {{ group_field(search_form.search_query, css_class="form-control") }}
+                        <span class="input-group-btn">
+                            <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
+                        </span>
+                    </div>
+                </form>
+            </div>
+
+            <div class="settings-content">
+
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
+                            <th>#</th>
+                            <th>{% trans %}Username{% endtrans %}</th>
+                            <th>{% trans %}Posts{% endtrans %}</th>
+                            <th>{% trans %}Date registered{% endtrans %}</th>
+                            <th>{% trans %}Group{% endtrans %}</th>
+                            <th>
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                        <span class="fa fa-cog" style="margin-right: 0px;"></span> {% trans %}Actions{% endtrans %}
+                                    </button>
+                                    <ul class="dropdown-menu slidedown">
+                                        <li>
+                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                                <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {% for user in users.items %}
+                        <tr class="action-row">
+                            <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
+                            <td>{{ user.id }}</td>
+                            <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
+                            <td>{{ user.post_count }}</td>
+                            <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
+                            <td>{{ user.primary_group.name }}</td>
+                            <td>
+                                {% if current_user|can_ban_user and user.permissions['banned'] %}
+                                    <form class="inline-form" id="unban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                        <button class="btn btn-link">
+                                            <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
+                                        </button>
+                                    </form>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% else %}
+                        <tr>
+                            <td colspan="6">
+                                {% trans %}No users found matching your search criteria.{% endtrans %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            <div class="panel-footer settings-footer">
+                {{ render_pagination(users, url_for('management.users')) }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}

flaskbb/themes/aurora/templates/management/management_layout.html

@@ -0,0 +1,28 @@
+{% extends theme("layout.html") %}
+
+{% block content %}
+{%- from theme('macros.html') import navlink with context -%}
+
+{% block breadcrumb %}
+{% endblock %}
+
+<div class="panel panel-tabs management-panel">
+    <div class="panel-heading management-head">
+        <ul class="nav nav-tabs nav-justified">
+        {{ navlink('management.overview', _('Overview'), 'fa fa-tasks') }}
+        {{ navlink('management.users', _('Users'), 'fa fa-user', active=active_management_user_nav) }}
+        {{ navlink('management.unread_reports', _('Reports'), 'fa fa-flag', active=active_management_report_nav) }}
+
+        {% if current_user|is_admin %}
+            {{ navlink('management.settings', _('Settings'), 'fa fa-cogs') }}
+            {{ navlink('management.groups', _('Groups'), 'fa fa-users', active=active_management_group_nav) }}
+            {{ navlink('management.forums', _('Forums'), 'fa fa-comments',active=active_management_forum_nav) }}
+            {{ navlink('management.plugins', _('Plugins'), 'fa fa-puzzle-piece') }}
+        {% endif %}
+        </ul>
+    </div>
+    <div class="panel-body management-body">
+        {% block management_content %}{% endblock %}
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/user_form.html

@@ -0,0 +1,57 @@
+{% set page_title = title %}
+{% set active_management_user_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% block breadcrumb %}
+<ol class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme("macros.html") import horizontal_field, horizontal_select_field, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.users', _("Manage Users")) }}
+            {{ navlink('management.banned_users', _('Banned Users')) }}
+
+            {% if current_user|is_admin %}
+                {{ navlink('management.add_user', _("Add User")) }}
+            {% endif %}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel">
+        <div class="panel-heading settings-head">
+            <span class="fa fa-user-plus"></span> {{ title }}
+        </div>
+        <div class="panel-body settings-body">
+            <div class="settings-content">
+                <form class="form-horizontal" role="form" method="post">
+                    {{ form.hidden_tag() }}
+                    {{ horizontal_field(form.username) }}
+                    {{ horizontal_field(form.email) }}
+                    {{ horizontal_field(form.password) }}
+                    {{ horizontal_select_field(form.birthday, surrounded_div="col-sm-4") }}
+                    {{ horizontal_field(form.gender) }}
+                    {{ horizontal_field(form.location) }}
+                    {{ horizontal_field(form.website) }}
+                    {{ horizontal_field(form.avatar) }}
+                    {{ horizontal_field(form.primary_group) }}
+                    {{ horizontal_field(form.secondary_groups) }}
+                    {{ horizontal_field(form.signature, rows=5, div_class="col-sm-9") }}
+                    {{ horizontal_field(form.notes, rows=12, div_class="col-sm-9") }}
+                    {{ horizontal_field(form.submit) }}
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

flaskbb/themes/aurora/templates/management/users.html

@@ -0,0 +1,171 @@
+{% set page_title = _("Users") %}
+{% set active_management_user_nav=True %}
+
+{% extends theme("management/management_layout.html") %}
+
+{% block breadcrumb %}
+<ol class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li><a href="{{ url_for('management.overview') }}">{% trans %}Management{% endtrans %}</a></li>
+    <li class="active">{% trans %}Manage Users{% endtrans %}</li>
+</ol>
+{% endblock %}
+
+{% block management_content %}
+{% from theme('macros.html') import render_pagination, group_field, navlink with context %}
+
+<div class="col-md-3 settings-col">
+    <div class="nav-sidebar">
+        <ul class="nav">
+            {{ navlink('management.users', _('Manage Users')) }}
+            {{ navlink('management.banned_users', _('Banned Users')) }}
+
+            {% if current_user|is_admin %}
+                {{ navlink('management.add_user', _("Add User")) }}
+            {% endif %}
+        </ul>
+    </div>
+</div><!--/.col-md-3 -->
+
+<div class="col-md-9 settings-col">
+    <div class="panel settings-panel">
+        <div class="panel-heading settings-head">
+
+            <span class="fa fa-user"></span> {% trans %}Users{% endtrans %}
+
+            <div class="pull-right action-buttons">
+                <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-default btn-xs" onclick="return show_management_search()">
+                        <span class="fa fa-search" style="margin-right: 0px;"></span> {% trans %}Search{% endtrans %}
+                    </button>
+                </div>
+            </div>
+
+        </div>
+        <div class="panel-body settings-body">
+
+            <div class="settings-search">
+                <form class="search-form" role="form" method="post">
+                    {{ search_form.hidden_tag() }}
+                    <div class="input-group">
+                        {{ group_field(search_form.search_query, css_class="form-control") }}
+                        <span class="input-group-btn">
+                            <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
+                        </span>
+                    </div>
+                </form>
+            </div>
+
+            <div class="settings-content">
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
+                            <th>#</th>
+                            <th>{% trans %}Username{% endtrans %}</th>
+                            <th>{% trans %}Posts{% endtrans %}</th>
+                            <th>{% trans %}Date registered{% endtrans %}</th>
+                            <th>{% trans %}Group{% endtrans %}</th>
+                            <th>
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                        <span class="fa fa-cog" style="margin-right: 0px;"></span> {% trans %}Actions{% endtrans %}
+                                    </button>
+                                    <ul class="dropdown-menu slidedown">
+                                        <li>
+                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">
+                                                <span class="fa fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                                <span class="fa fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a href="javascript:void(0)" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">
+                                                <span class="fa fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {% for user in users.items %}
+                        <tr class="action-row">
+                            <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
+                            <td>{{ user.id }}</td>
+                            <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
+                            <td>{{ user.post_count }}</td>
+                            <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
+                            <td>{{ user.primary_group.name }}</td>
+                            <td>
+                                {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
+                                    <a href="{{ url_for('management.edit_user', user_id = user.id) }}">
+                                        <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                                    </a>
+                                {% endif %}
+
+                                {% if current_user|can_ban_user and not user.permissions['banned'] %}
+                                    <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                        <button class="btn btn-link">
+                                            <span class="fa fa-flag text-warning" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}"></span>
+                                        </button>
+                                    </form>
+                                {% endif %}
+
+                                {% if current_user|can_ban_user and user.permissions['banned'] %}
+                                    <form class="inline-form" id="unban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                        <button class="btn btn-link">
+                                            <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
+                                        </button>
+                                    </form>
+                                {% endif %}
+
+                                {% if current_user|is_admin %}
+                                <form class="inline-form" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
+                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                    <button class="btn btn-link">
+                                        <span class="fa fa-trash text-danger" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}"></span>
+                                    </button>
+                                </form>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% else %}
+                        <tr>
+                            <td colspan="6">
+                                {% trans %}No users found matching your search criteria.{% endtrans %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+        <div class="panel-footer settings-footer">
+            {{ render_pagination(users, url_for('management.users')) }}
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}