From e6e16f61d3bc9e04dae16837dc64adf79318ac6b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 25 Mar 2021 10:58:00 -0700
Subject: [PATCH] Adds filters ui

---
 bookwyrm/templates/directory.html | 44 +++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/bookwyrm/templates/directory.html b/bookwyrm/templates/directory.html
index fe523c52a..fa0e6c633 100644
--- a/bookwyrm/templates/directory.html
+++ b/bookwyrm/templates/directory.html
@@ -28,6 +28,50 @@
 </div>
 {% endif %}
 
+<div class="notification content">
+    <h2 class="columns is-mobile mb-0">
+        <span class="column pb-0">Filters</span>
+
+        <span class="column is-narrow pb-0">
+            {% trans "Show filters" as text %}
+            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon="arrow-down" class="is-small" %}
+            {% trans "Hide filters" as text %}
+            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon="x" class="is-small" %}
+        </span>
+    </h2>
+
+    <div class="hidden mt-3" id="filters">
+        <div class="columns">
+            <div class="column">
+                <legend class="label">User type</legend>
+                <div class="box">
+                    <label class="label"><input type="radio" class="radio"> {% trans "BookWyrm instances" %}</label>
+                    <label class="label"><input type="radio" class="radio"> {% trans "All services" %}</label>
+                </div>
+            </div>
+            <div class="column">
+                <legend class="label">Community</legend>
+                <div class="box">
+                    <label class="label"><input type="radio" class="radio"> Local users</label>
+                    <label class="label"><input type="radio" class="radio"> Federated community</label>
+                </div>
+            </div>
+            <div class="column">
+                <legend class="label">Order by</legend>
+                <div class="box">
+                    <div class="select">
+                        <select>
+                            <option checked>Suggested</option>
+                            <option>Recently active</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="button is-primary">{% trans "Apply filters" %}</button>
+    </div>
+</div>
+
 <div class="columns is-multiline">
     {% for user in users %}
     <div class="column is-one-third">