Initial progress on styling

templates/fragments/add_post_to_pool.html

@@ -1,4 +1,4 @@
-{% include "pool_posts.html" %}
+{% include "fragments/pool_posts.html" %}
 <input
   id="add-post-input"
   name="post_id"

templates/fragments/common_headers.html

@@ -0,0 +1,6 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<script src="/static/htmx.js"></script>
+<link rel="stylesheet" href="/static/water.css" />
+<link rel="stylesheet" href="/static/samey.css" />
+<meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />

templates/fragments/edit_post_details.html

@@ -1,28 +1,16 @@
 <form hx-put="/post_details/{{ post.id }}" hx-target="this" hx-swap="outerHTML">
   <div>
     <label>Tags</label>
-    <input
-      class="tags"
-      type="text"
-      id="search-tags"
-      name="tags"
-      hx-post="/search_tags"
-      hx-trigger="input changed delay:400ms"
-      hx-target="next .tags-autocomplete"
-      hx-swap="innerHTML"
-      hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-      value="{{ tags }}"
-      autofocus
-    />
+    {% let tags_value = tags %} {% include "fragments/tags_input.html" %}
     <ul class="tags-autocomplete" id="search-autocomplete"></ul>
   </div>
   <div>
     <label>Title</label>
-    <input name="title" type="text" maxlength="100" value="{% if let Some(title) = post.title %}{{ title }}{% endif %}" />
+    <input name="title" type="text" maxlength="100" placeholder="Title" value="{% if let Some(title) = post.title %}{{ title }}{% endif %}" />
   </div>
   <div>
     <label>Description</label>
-    <textarea name="description">{% if let Some(description) = post.description %}{{ description }}{% endif %}</textarea>
+    <textarea name="description" placeholder="Description in Markdown">{% if let Some(description) = post.description %}{{ description }}{% endif %}</textarea>
   </div>
   <div>
     <label>Is public post?</label>
@@ -41,7 +29,7 @@
     <label>Source(s)</label>
     <ul id="sources">
       {% for source in sources %}
-      {% include "post_source.html" %}
+      {% include "fragments/post_source.html" %}
       {% endfor %}
     </ul>
     <button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+</button>

templates/fragments/pool_posts.html

@@ -15,6 +15,7 @@
       <a href="/post/{{ post.id }}" title="{{ post.tags }}">
         <img src="/files/{{ post.thumbnail }}" />
         <div>{{ post.rating | upper }}</div>
+        <div>{{ post.media_type }}</div>
       </a>
       {% if can_edit %}
       <button

templates/fragments/post_details.html

@@ -6,8 +6,10 @@
   </div>
   <div>
     <label>Description</label>
-    {% if let Some(description) = post.description %}{{ description }}{% else
-    %}<em>None</em>{% endif %}
+    {% if let Some(description) = post.description %}{{ description | markdown
+    }}{% else %}
+    <p><em>None</em></p>
+    {% endif %}
   </div>
   <div>
     <label>Is public?</label>

templates/fragments/select_tag.html

@@ -0,0 +1,2 @@
+{% include "fragments/tags_input.html" %}
+<ul class="tags-autocomplete" hx-swap-oob="outerHTML:.tags-autocomplete"></ul>

templates/fragments/submit_post_details.html

@@ -1,7 +1,11 @@
-{% include "post_details.html" %} {% if let Some(parent_post) = parent_post %}
+{% include "fragments/post_details.html" %} {% if let Some(parent_post) =
+parent_post %}
 <article id="parent-post" hx-swap-oob="outerHTML">
   <h2>Parent</h2>
-  <a href="/post/{{ parent_post.id }}" title="{{ parent_post.tags }}">
+  <a
+    href="/post/{{ parent_post.id }}"
+    title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}"
+  >
     <img src="/files/{{ parent_post.thumbnail }}" />
     <div>{{ parent_post.rating }}</div>
   </a>

templates/fragments/tags_input.html

@@ -3,12 +3,13 @@
   type="text"
   id="search-tags"
   name="tags"
+  placeholder="Tags"
   hx-post="/search_tags"
   hx-trigger="input changed"
   hx-target="next .tags-autocomplete"
   hx-vals="js:{selection_end: event.target.selectionEnd}"
   hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-  value="{{ tags }}"
-  autofocus
+  value="{{ tags_value }}"
+  aria-autocomplete="list"
+  aria-controls="search-autocomplete"
 />
-<ul class="tags-autocomplete" hx-swap-oob="outerHTML:.tags-autocomplete"></ul>

templates/index.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <title>{{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
-  </head>
-  <body>
-    <main>
-      <h1>{{ application_name }}</h1>
-      <article>
-        <h2>Search</h2>
-        <form method="get" action="/posts/1">
-          <input
-            class="tags"
-            type="text"
-            id="search-tags"
-            name="tags"
-            hx-post="/search_tags"
-            hx-trigger="input changed"
-            hx-target="next .tags-autocomplete"
-            hx-vals="js:{selection_end: event.target.selectionEnd}"
-            hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-            autofocus
-          />
-          <ul class="tags-autocomplete" id="search-autocomplete"></ul>
-          <button type="submit">Search</button>
-        </form>
-      </article>
-      <article>
-        <a href="/posts/1">Posts</a>
-        <a href="/pools/1">Pools</a>
-      </article>
-      {% if let Some(user) = user %}
-      <article>
-        <h2>Upload media</h2>
-        <form method="post" action="/upload" enctype="multipart/form-data">
-          <input
-            class="tags"
-            type="text"
-            id="upload-tags"
-            name="tags"
-            hx-post="/search_tags"
-            hx-trigger="input changed"
-            hx-target="next .tags-autocomplete"
-            hx-vals="js:{selection_end: event.target.selectionEnd}"
-            hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-          />
-          <ul class="tags-autocomplete" id="upload-autocomplete"></ul>
-          <input
-            type="file"
-            id="media-file"
-            name="media-file"
-            accept=".jpg, .jpeg, .png, .webp, .gif, .mp4, .webm, .mkv, .mov"
-          />
-          <button type="submit">Submit</button>
-        </form>
-      </article>
-      <article>
-        <h2>Create pool</h2>
-        <form method="post" action="/pool">
-          <input
-            class="pool"
-            type="text"
-            id="pool"
-            name="pool"
-            maxlength="100"
-          />
-          <button type="submit">Submit</button>
-        </form>
-      </article>
-      <article>
-        <a href="/logout">Log out</a>
-      </article>
-      {% else %}
-      <article>
-        <h2>Log in</h2>
-        <form method="post" action="/login">
-          <div>
-            <label>Username</label>
-            <input id="username" type="text" name="username" />
-          </div>
-          <div>
-            <label>Password</label>
-            <input id="password" type="password" name="password" />
-          </div>
-          <button type="submit">Submit</button>
-        </form>
-      </article>
-      {% endif %}
-    </main>
-  </body>
-</html>

templates/pages/create_pool.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Create pool - {{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <main>
+      <h1>Create pool</h1>
+      <form method="post" action="/pool">
+        <input
+          class="pool"
+          type="text"
+          id="pool"
+          name="pool"
+          maxlength="100"
+          placeholder="Name"
+          autofocus
+        />
+        <button type="submit">Create</button>
+      </form>
+    </main>
+  </body>
+</html>

templates/pages/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <main>
+      <h1>{{ application_name }}</h1>
+      <article>
+        <h2>Search</h2>
+        <form method="get" action="/posts/1">
+          {% let tags_value = "" %} {% include "fragments/tags_input.html" %}
+          <ul class="tags-autocomplete" id="search-autocomplete"></ul>
+          <button type="submit">Search</button>
+        </form>
+      </article>
+      <nav>
+        <ul>
+          <li>
+            <a href="/posts/1">Posts</a>
+          </li>
+          <li>
+            <a href="/pools/1">Pools</a>
+          </li>
+          {% if let Some(user) = user %}
+          <li>
+            <a href="/upload">Upload media</a>
+          </li>
+          <li>
+            <a href="/create_pool">Create pool</a>
+          </li>
+          {% if user.is_admin %}
+          <li>
+            <a href="/settings">Settings</a>
+          </li>
+          {% endif %}
+          <li>
+            <a href="/logout">Log out ({{ user.username }})</a>
+          </li>
+          {% else %}
+          <li>
+            <a href="/login">Login</a>
+          </li>
+          {% endif %}
+        </ul>
+      </nav>
+    </main>
+  </body>
+</html>

templates/pages/login.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Login - {{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <main>
+      <h1>Login</h1>
+      <form method="post" action="/login">
+        <div>
+          <label>Username</label>
+          <input id="username" type="text" name="username" autofocus />
+        </div>
+        <div>
+          <label>Password</label>
+          <input id="password" type="password" name="password" />
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+  </body>
+</html>

templates/pages/not_found.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Not found</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <main>
+      <h1>Not found</h1>
+      <p>The requested resource could not be found.</p>
+    </main>
+  </body>
+</html>

templates/pages/pool.html

@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <script src=" https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js "></script>
     <title>Pool - {{ pool.name }} - {{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
+    {% include "fragments/common_headers.html" %}
+    <script src="/static/sortable.js"></script>
     <meta property="og:title" content="{{ pool.name }}" />
     <meta property="og:url" content="/pool/{{ pool.id }}" />
     <meta property="twitter:title" content="{{ pool.name }}" />
@@ -50,12 +47,13 @@
     {% endif %}
   </head>
   <body>
+    <div><a href="/">&lt; To home</a></div>
     <main>
       <h1>Pool - {{ pool.name }}</h1>
     </main>
     <article>
       <h2>Posts</h2>
-      {% include "pool_posts.html" %}
+      {% include "fragments/pool_posts.html" %}
     </article>
     {% if can_edit %}
     <article>
@@ -68,8 +66,9 @@
           <label>Add post</label>
           <input
             id="add-post-input"
-            name="post_id"
             type="text"
+            name="post_id"
+            placeholder="Post ID"
             pattern="[0-9]*"
           />
           <button>Add</button>

templates/pages/pools.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Pools - {{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <main>
+      <h1>Pools</h1>
+      {% if pools.is_empty() %}
+      <div>No pools found!</div>
+      {% else %}
+      <ul>
+        {% for pool in pools %}
+        <li>
+          <a href="/pool/{{ pool.id }}"> {{ pool.name }} </a>
+        </li>
+        {% endfor %}
+      </ul>
+      <div>
+        <ul>
+          {% for i in 1..=page_count %}
+          <li>
+            {% if i == page as u64 %}
+            <b>{{ i }}</b>
+            {% else %}
+            <a href="/pools/{{ i }}">{{ i }}</a>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+    </main>
+  </body>
+</html>

templates/pages/posts.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Posts - {{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <article>
+      <h2>Search</h2>
+      <form method="get" action="/posts">
+        <input
+          class="tags"
+          type="text"
+          id="search-tags"
+          name="tags"
+          placeholder="Tags"
+          hx-post="/search_tags"
+          hx-trigger="input changed"
+          hx-target="next .tags-autocomplete"
+          hx-vals="js:{selection_end: event.target.selectionEnd}"
+          hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
+          value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
+          autofocus
+        />
+        <ul class="tags-autocomplete" id="search-autocomplete"></ul>
+        <button type="submit">Search</button>
+      </form>
+    </article>
+    {% if let Some(tags) = tags %}
+    {% if !tags.is_empty() %}
+    <article>
+      <h2>Tags</h2>
+      <ul>
+         {% for tag in tags %}
+        <li><a href="/posts?tags={{ tag }}">{{ tag }}</a></li>
+        {% endfor %}
+      </ul>
+    </article>
+    {% endif %}
+    {% endif %}
+    <main>
+      <h1>Posts</h1>
+      {% if posts.is_empty() %}
+      <div>No posts found!</div>
+      {% else %}
+      <div>
+        <ul>
+          {% for post in posts %}
+          <li>
+            <a
+              href="{% if let Some(tags_text) = tags_text %}/post/{{ post.id }}?tags={{ tags_text.replace(' ', "+") }}{% else %}/post/{{ post.id }}{% endif %}"
+              title="{% if let Some(tags) = post.tags %}{{ tags }}{% endif %}"
+            >
+              <img src="/files/{{ post.thumbnail }}" />
+              <div>{{ post.rating | upper }}</div>
+              <div>{{ post.media_type }}</div>
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      <div>
+        <ul>
+          {% for i in 1..=page_count %}
+          <li>
+            {% if i == page as u64 %}
+            <b>{{ i }}</b>
+            {% else %}
+            <a href="{% if let Some(tags_text) = tags_text %}/posts/{{ i }}?tags={{ tags_text.replace(' ', "+") }}{% else %}/posts/{{ i }}{% endif %}">{{ i }}</a>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+    </main>
+  </body>
+</html>

templates/pages/settings.html

@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
     <title>Settings - {{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
+    {% include "fragments/common_headers.html" %}
   </head>
   <body>
+    <div><a href="/">&lt; To home</a></div>
     <main>
       <h1>Settings</h1>
       <form hx-put="/settings" hx-swap="none">

templates/pages/upload.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Upload media - {{ application_name }}</title>
+    {% include "fragments/common_headers.html" %}
+  </head>
+  <body>
+    <div><a href="/">&lt; To home</a></div>
+    <main>
+      <h1>Upload media</h1>
+      <form method="post" action="/upload" enctype="multipart/form-data">
+        {% let tags_value = "" %} {% include "fragments/tags_input.html" %}
+        <ul class="tags-autocomplete" id="upload-autocomplete"></ul>
+        <input
+          type="file"
+          id="media-file"
+          name="media-file"
+          accept=".jpg, .jpeg, .png, .webp, .gif, .mp4, .webm, .mkv, .mov"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+  </body>
+</html>

templates/pages/view_post.html

@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
     <title>Post #{{ post.id }} - {{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
+    {% include "fragments/common_headers.html" %}
     <meta property="og:site_name" content="{{ application_name }}" />
     <meta
       property="og:title"
@@ -24,13 +21,13 @@
     <meta property="og:image" content="/files/{{ post.media }}" />
     <meta property="og:image:width" content="{{ post.width }}" />
     <meta property="og:image:height" content="{{ post.height }}" />
-    <meta property="og:image:alt" content="{{ tags_text }}" />
+    <meta property="og:image:alt" content="{{ tags_post }}" />
     <meta property="twitter:card" content="summary_large_image" />
     {% when "video" %}
     <meta property="og:video" content="/files/{{ post.media }}" />
     <meta property="og:video:width" content="{{ post.width }}" />
     <meta property="og:video:height" content="{{ post.height }}" />
-    <meta property="og:video:alt" content="{{ tags_text }}" />
+    <meta property="og:video:alt" content="{{ tags_post }}" />
     <meta property="og:video:type" content="video/mp4" />
     <meta property="twitter:card" content="player" />
     <meta name="twitter:player" content="/files/{{ post.media }}" />
@@ -40,22 +37,57 @@
     {% else %} {% endmatch %}
   </head>
   <body>
+    <div><a href="{% if let Some(tags_text) = tags_text %}/posts/1?tags={{ tags_text.replace(' ', "+") }}{% else %}/posts/1{% endif %}">&lt; To posts</a></div>
+    <article>
+      <h2>Search</h2>
+      <form method="get" action="/posts">
+        <input
+          class="tags"
+          type="text"
+          id="search-tags"
+          name="tags"
+          hx-post="/search_tags"
+          hx-trigger="input changed"
+          hx-target="next .tags-autocomplete"
+          hx-vals="js:{selection_end: event.target.selectionEnd}"
+          hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
+          value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
+          autofocus
+        />
+        <ul class="tags-autocomplete" id="search-autocomplete"></ul>
+        <button type="submit">Search</button>
+      </form>
+    </article>
+    <article>
+      <h2>Tags</h2>
+      {% if tags.is_empty() %}
+      <p>No tags in post. Consider adding some!</p>
+      {% else %}
+      <ul id="tags-list">
+        {% for tag in tags %}
+        <li>
+          <a href="/posts?tags={{ tag.name }}">{{ tag.name }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </article>
     <main>
       <h1>View post #{{ post.id }}</h1>
       <div>
         {% match post.media_type.as_ref() %}{% when "image" %}{% include
-        "get_image_media.html" %}{% when "video" %}{% include
-        "get_video_media.html" %}{% else %}{% endmatch %}
+        "fragments/get_image_media.html" %}{% when "video" %}{% include
+        "fragments/get_video_media.html" %}{% else %}{% endmatch %}
       </div>
     </main>
     <article>
       <h2>Details</h2>
-      {% include "post_details.html" %}
+      {% include "fragments/post_details.html" %}
     </article>
     {% if let Some(parent_post) = parent_post %}
     <article id="parent-post">
       <h2>Parent</h2>
-      <a href="/post/{{ parent_post.id }}" title="{{ parent_post.tags }}">
+      <a href="/post/{{ parent_post.id }}" title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}">
         <img src="/files/{{ parent_post.thumbnail }}" />
         <div>{{ parent_post.rating }}</div>
         <div>{{ parent_post.media_type }}</div>
@@ -69,7 +101,7 @@
       <ul>
         {% for child_post in children_posts %}
         <li>
-          <a href="/post/{{ child_post.id }}" title="{{ child_post.tags }}">
+          <a href="/post/{{ child_post.id }}" title="{% if let Some(tags) = child_post.tags %}{{ tags }}{% endif %}">
             <img src="/files/{{ child_post.thumbnail }}" />
             <div>{{ child_post.rating | upper }}</div>
             <div>{{ child_post.media_type }}</div>
@@ -79,15 +111,5 @@
       </ul>
     </article>
     {% endif %}
-    <article>
-      <h2>Tags</h2>
-      <ul id="tags-list">
-        {% for tag in tags %}
-        <li>
-          <a href="/posts?tags={{ tag.name }}">{{ tag.name }}</a>
-        </li>
-        {% endfor %}
-      </ul>
-    </article>
   </body>
 </html>

templates/pools.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <title>Pools - {{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
-  </head>
-  <body>
-    <main>
-      <h1>Viewing pools</h1>
-      {% if pools.is_empty() %}
-      <div>No pools found!</div>
-      {% else %}
-      <ul>
-        {% for pool in pools %}
-        <li>
-          <a href="/pool/{{ pool.id }}"> {{ pool.name }} </a>
-        </li>
-        {% endfor %}
-      </ul>
-      <div>Page {{ page }} of {{ page_count }}</div>
-      {% endif %}
-    </main>
-  </body>
-</html>

templates/posts.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-    <title>Posts - {{ application_name }}</title>
-    <meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
-  </head>
-  <body>
-    <article>
-      <h2>Search</h2>
-      <form method="get" action="/posts">
-        <input
-          class="tags"
-          type="text"
-          id="search-tags"
-          name="tags"
-          hx-post="/search_tags"
-          hx-trigger="input changed"
-          hx-target="next .tags-autocomplete"
-          hx-vals="js:{selection_end: event.target.selectionEnd}"
-          hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-          autofocus
-        />
-        <ul class="tags-autocomplete" id="search-autocomplete"></ul>
-        <button type="submit">Search</button>
-      </form>
-    </article>
-    <article>
-      <h2>Tags</h2>
-      <ul>
-        {% if let Some(tags) = tags %} {% for tag in tags %}
-        <li><a href="/posts?tags={{ tag }}">{{ tag }}</a></li>
-        {% endfor %} {% endif %}
-      </ul>
-    </article>
-    <main>
-      <h1>Viewing posts</h1>
-      {% if posts.is_empty() %}
-      <div>No posts found!</div>
-      {% else %}
-      <ul>
-        {% for post in posts %}
-        <li>
-          <a
-            href="{% if let Some(tags_text) = tags_text %}/post/{{ post.id }}?tags={{ tags_text.replace(' ', "+") }}{% else %}/post/{{ post.id }}{% endif %}"
-            title="{{ post.tags }}"
-          >
-            <img src="/files/{{ post.thumbnail }}" />
-            <div>{{ post.rating | upper }}</div>
-            <div>{{ post.media_type }}</div>
-          </a>
-        </li>
-        {% endfor %}
-      </ul>
-      <div>Page {{ page }} of {{ page_count }}</div>
-      {% endif %}
-    </main>
-  </body>
-</html>