From fd66853a394585f2edaf98f4705b6cf9d48a2e69 Mon Sep 17 00:00:00 2001
From: Michael Zhang <me@michaelz.xyz>
Date: Thu, 8 Sep 2016 15:07:43 -0500
Subject: [PATCH] Add search UI for users.

---
 templates/users/list.html | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/templates/users/list.html b/templates/users/list.html
index 11cfe83..f53722c 100644
--- a/templates/users/list.html
+++ b/templates/users/list.html
@@ -5,22 +5,39 @@
 {% endblock %}
 
 {% block content %}
-    {% for user in users %}
-        <div id="user_{{ user.id }}">
-            {{ user.id }}
-            <b><a href="{{ url_for('users.users_detail', user_id=user.id) }}">{{ user.username }}</a></b>
-            {% if enabled_actions %}
-                <form></form>
-            {% endif %}
-            <br/>
+    <form class="form-horizontal">
+        <div class="input-group">
+            <input type="text" class="form-control" id="search" name="search" placeholder="Search by username" autocomplete="off"/>
+                <span class="input-group-btn">
+                    <input type="submit" class="btn btn-primary" value="Search Users"/>
+                </span>
         </div>
-    {% endfor %}
+    </form>
 
-    <p>
+    <div class="panel panel-default">
+        <table class="table table-striped table-hover">
+            <thead>
+            <tr>
+                <th>#</th>
+                <th>Username</th>
+            </tr>
+            </thead>
+            <tbody>
+            {% for user in users %}
+                <tr>
+                    <td>{{ user.id }}</td>
+                    <td><a href="{{ url_for('users.users_detail', user_id=user.id) }}">{{ user.username }}</a></td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <center>
         {% if page_number == 1 %}Prev{% else %}
             <a href="{{ url_for('users.users_list', page_number=page_number - 1) }}">Prev</a>{% endif %}
         / Page <b>{{ page_number }}</b> /
         {% if last_page %}Next{% else %}
             <a href="{{ url_for('users.users_list', page_number=page_number + 1) }}">Next</a>{% endif %}
-    </p>
+    </center>
 {% endblock %}