3 files changed, 93 insertions, 19 deletions
diff --git a/web_server/static/style.css b/web_server/static/style.css
index 09a985c..7d2ba89 100644
--- a/web_server/static/style.css
+++ b/web_server/static/style.css
@@ -38,6 +38,48 @@ a:hover {
   color: #ccc;
 }
 
+.thumbnail {
+  display: block;
+  max-height: 256px;
+  max-width: 512px;
+}
+
+/*
+ * Playlist table
+ */
+
+td {
+  padding-right: 16px;
+  padding-top: 1px;
+  padding-bottom: : 1px;
+}
+
+td, th {
+  vertical-align:top;
+}
+
+.tableheader td {
+  color: #918f8f;
+  border-bottom: 1px solid #3f4077;
+}
+
+.stat {
+  text-align: right;
+  white-space: nowrap;
+  padding-left: 8px
+}
+
+.tracktable {
+    border-left: 1px solid #3f4077;
+}
+
+.tracktable tr:hover {
+    background-color: #163037;
+}
+
+/*
+ * API Docs
+ */
 pre {
   font-size: 0.9rem;
   font-family: monospace;
diff --git a/web_server/templates/index.htm b/web_server/templates/index.htm
index eed31f3..fc1f8e1 100644
--- a/web_server/templates/index.htm
+++ b/web_server/templates/index.htm
@@ -13,24 +13,63 @@
   <a href="/docs/api">API</a>
 </nav>
 
-<ul>
-  {% for bot in bots %}
+<nav>
+  <ul>
+      {% let bot_name %}
+      {% match bot %}
+        {% when Some with (bot) %}
+          {% let bot_name = bot.name.clone() %}
+        {% when None %}
+          {% let bot_name = "".to_owned() %}
+      {% endmatch %}
+    {% for name in bot_names %}
+      {% if name.clone() == bot_name %}
+        <li><a href="/bot/{{ name }}" class="botname selected">{{ name }}</a></li>
+      {% else %}
+        <li><a href="/bot/{{ name }}" class="botname">{{ name }}</a></li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</nav>
+{% match bot %}
+  {% when Some with (bot) %}
     <h2>{{ bot.name }}</h1>
     <div>State: {{ bot.state }}</div>
     <div>Volume: {{ bot.volume * 100.0 }}%</div>
     {% match bot.currently_playing %}
       {% when Some with (current) %}
-        <span>Currently playing:</span>
-        {% let item = current %}
-        {% include "song.htm" %}
+        <h3>Currently playing:</h3>
+        {% match current.thumbnail %}
+          {% when Some with (thumbnail) %}
+            <img src="{{ thumbnail }}" class="thumbnail">
+          {% when None %}
+        {% endmatch %}
+        <a href="{{ current.webpage_url }}">{{ current.title }}</a>
+        <span>({{ current.duration|fmt_duration }})</span>
       {% when None %}
     {% endmatch %}
 
-    {% for item in bot.playlist %}
-      <li>
-        {% include "song.htm" %}
-      </li>
-    {% endfor %}
-  {% endfor %}
-</ul>
+    <h3>Playlist</h3>
+    <table class="tracktable" cellspacing="0" cellpadding="0">
+      <tr class="tableheader">
+        <td class="stat">#</td>
+        <td>track</td>
+        <td>length</td>
+        <td>added by</td>
+      </tr>
+      {% for item in bot.playlist %}
+      <tr>
+        <td class="stat">{{ loop.index }}</td>
+        <td><a href="{{ item.webpage_url }}">{{ item.title }}</a></td>
+        <td>
+          {% let duration = item.duration %}
+          {{ duration|fmt_duration }}
+        </td>
+        <td>{{ item.added_by }}</td>
+      </tr>
+      {% endfor %}
+    </table>
+    </ul>
+  {% when None %}
+  {% endmatch %}
 {% endblock %}
diff --git a/web_server/templates/song.htm b/web_server/templates/song.htm
deleted file mode 100644
index 072567a..0000000
--- a/web_server/templates/song.htm
+++ /dev/null
@@ -1,7 +0,0 @@
-<a href="{{ item.webpage_url }}">{{ item.title }}</a>
-<span>({{ item.duration|fmt_duration }})</span>
-{% match item.thumbnail %}
-  {% when Some with (thumbnail) %}
-    <img src="{{ thumbnail }}" height="128">
-  {% when None %}
-{% endmatch %}