Extracted template logic into more templates

Moo/play/templates/404.html

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block body %}
+
+<div style="text-align: center;">
+  <div 
+     class="bg-1 clr-5"
+     style="margin: 32px;
+            padding: 32px;
+            font-size: 24px;
+            border-radius: 8px;
+            width: 420px;
+            margin-left: auto;
+            margin-right: auto;">
+    <span style="margin-right: 0.5em;">
+      {{ emoji.notfound | safe }}
+    </span>
+    404 Page Not Found
+  </div>
+</div>
+
+{% endblock %}

Moo/play/templates/base.html

@@ -0,0 +1,20 @@
+{% extends "layout.html" %}
+
+{% block body %}
+
+<h1><a href="/">{{ emoji.app | safe }}</a> {{ base }}</h1>
+
+<p>
+<span class="box">
+  {{ "{:,}".format(albums | length) }} albums</span>
+</p>
+
+<blockquote style="width: 65%; margin-left: auto; margin-right: auto;">
+  <ol style="text-align: left">
+    {% for path in albums %}
+    <li><a href="file://{{ path }}">{{ path }}</a></li>
+    {% endfor %}
+  </ol>
+</blockquote>
+
+{% endblock %}

Moo/play/templates/clock.html

@@ -0,0 +1,17 @@
+<div style="position: fixed; top: 8px; right: 12px;">
+  <span
+     id="time"
+     class="clr-5"></span>
+  {%- 
+  if request.path.startswith('/album')
+  or request.path.startswith('/track') 
+  or request.path.startswith('/docs') 
+  -%}
+  <a href="/"
+     class="button"
+     style="margin-left: 8px">&times;</a>
+  {% else %}
+  <a href="/random"
+     style="margin-left: 8px;">{{ emoji.random | safe }}</a>
+  {%- endif -%}
+</div>

Moo/play/templates/counter.html

@@ -0,0 +1,27 @@
+<div id="{{ counter }}-counts" style="display: none">
+
+  <p>
+    <div style="margin-bottom: 1em">
+      <span class="box">
+        {{ "{:,}".format(counts[counter] | length) }}
+        <b>{{ counter }}s</b></span>
+    </div>
+
+    {% for item in counts[counter] | sort %}
+
+    <div class="box count-card">
+
+      <span class="clr-5" style="float: right">
+        {{ counts[counter][item] }}</span>
+
+      <div style="max-width: 180px;">
+        <a href="/{{ counter }}/{{ item | urlencode }}">
+          {{ item }}</a>
+      </div>
+
+    </div>
+
+    {% endfor %}
+  </p>
+
+</div>

Moo/play/templates/footer.html

@@ -0,0 +1,5 @@
+<p id="footer"
+   class="center">
+  <a href="{{ config.WWW }}">moo</a>
+  {{ config.VERSION }}
+</p>

Moo/play/templates/header.html

@@ -0,0 +1,6 @@
+<div id="header">
+  {% include "facet-buttons.html" %}
+  {% include "genre-buttons.html" %}
+  {% include "alpha-buttons.html" %}
+  {% include "emoji-buttons.html" %}
+</div>

Moo/play/templates/prefixed.html

@@ -0,0 +1,18 @@
+{% if prefixed %}
+<div 
+  style="margin-bottom: 1.2em;
+          padding: 0.1em 0;
+          background-color: yellow;
+          border-radius: 8px;">
+
+  {% for prefix in prefixed %}
+  <ul>
+    <span>{{ prefix }}</span>
+    {% for item in prefixed[prefix] %}
+    <li>{{ item }}</li>
+    {% endfor %}
+  </ul>
+  {% endfor %}
+
+</div>
+{% endif %}