From ce571c041953f31f21bc50f3cfda9645d3201e0f Mon Sep 17 00:00:00 2001
From: magmaus3 <magmaus3@disroot.org>
Date: Sat, 26 Nov 2022 19:02:02 +0100
Subject: [PATCH] Show the searchBar at the top of the Home

---
 iwm_browser/templates/home.html | 54 ++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 7 deletions(-)
diff --git a/iwm_browser/templates/home.html b/iwm_browser/templates/home.html
index 7e48945..0a5a4f2 100644
--- a/iwm_browser/templates/home.html
+++ b/iwm_browser/templates/home.html
@@ -7,16 +7,56 @@
     <link rel="stylesheet" href="/static/index.css">
     <link rel="stylesheet" href="/static/main.css">
     <link rel="stylesheet" href="/static/homepage.css">
+    <link rel="stylesheet" href="/static/search/search.css">
   </head>
   <body>
     <div class="Home">
-      <div class="contentBox">
-        <div class="header">IWM Browser</div>
-        <div class="splitter"></div>
-        <div class="tileBox"><a href="/search?q=&sort=average_rating&dir=desc&date=24">Popular ⭐</a></div>
-        <div class="tileBox"><a href="/search?q=&sort=created_at&dir=desc&date=-1">Recent ❓</a></div>
-        <div class="tileBox"><a href="/search">Search 🔍</a></div>
+      <div class="contentBox_">
+        <div class='searchBar'>
+          <form action="/search" method="get">
+            <div class="search_entry">
+              <input style="width: 19rem;" type='text' id="q" name="q" value='' placeholder="Enter a level name or code"/>
+              <button class="searchButton" id='searchButton' type='submit'>🔍</button>
+            </div>
+            <details>
+              <summary>More options</summary>
+              {% macro option(name, value, key) -%}
+                <option value={{ value }} {{ isSelected(value, key) }}>{{ name }}</option>
+              {%- endmacro %}
+              <div class="sortType">
+                <label for="sort">Sort type</label>
+                <select id="sort" name="sort">
+                  {{ option("Rating", "average_rating", "sort") }}
+                  {{ option("Upload date", "created_at", "sort") }}
+                  {{ option("Difficulty", "average_difficulty", "sort") }}
+                  {{ option("Plays", "play_count", "sort") }}
+                </select>
+                <select id="dir" name="dir">
+                  {{ option("Descending", "desc", "dir") }}
+                  {{ option("Ascending", "asc", "dir") }}
+                </select>
+              </div>
+              <div class="upload_date">
+                <label for="date">Upload date</label>
+                <select id="date" name="date">
+                  {{ option("All time", -1, "date") }}
+                  {{ option("Past 30 days", 720, "date") }}
+                  {{ option("Past 7 days", 168, "date") }}
+                  {{ option("Past day", 24, "date") }}
+                  {{ option("Past hour", 1, "date") }}
+                </select>
+              </div>
+            </details>
+          </form>
+        </div>
+        <div class="contentBox">
+          <div class="header">IWM Browser</div>
+          <div class="splitter"></div>
+          <div class="tileBox"><a href="/search?q=&sort=average_rating&dir=desc&date=24">Popular ⭐</a></div>
+          <div class="tileBox"><a href="/search?q=&sort=created_at&dir=desc&date=-1">Recent ❓</a></div>
+          <div class="tileBox"><a href="/search">Search 🔍</a></div>
+        </div>
+      </div>
       </div>
-    </div>
   </body>
 </html>
