refactor issue finder to replace vue with plain js and update html

themes/vocabulary_theme/templates/issue_finder.html

@@ -3,40 +3,58 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <div class="issue-finder">
-    <div class="header">
-      <div class="container is-paddingless">
-        <h1>{{ this.title }}</h1>
-        <div class="description column is-9 is-paddingless">
-          {{ this.description }}
+
+ <header>
+    <h1>{{ this.title }}</h1>
+    <p> {{ this.description }}</p>
+  </header>
+  <div>
+    <div id="app">
+      <div>
+        <div class="columns">
+          <!-- Filters Section -->
+          <div class="column is-one-quarter">
+            <form id="filters">
+              <label for="aim">
+                <strong>Aim</strong><br />
+                I am interested in...
+              </label>
+              <select id="aim">
+                <option value="contribute">Contributing code</option>
+                <option value="triage">Triaging issues</option>
+                <option value="label">Labelling issues</option>
+              </select>
+              <br />
+              <div id="skill-filters">
+                <label for="skills">
+                  <strong>Skill set*</strong><br />
+                  Choose up to three skills.
+                </label>
+                <select id="skills">
+                  <!-- Skills dynamically injected -->
+                </select>
+                <br />
+                <label for="experience">
+                  <strong>Experience</strong><br />
+                  Is this your first time contributing to CC?
+                </label>
+                <select id="experience">
+                  <option value="beginner">Yes, it is</option>
+                  <option value="experienced" selected>No, it isn’t</option>
+                </select>
+              </div>
+              <p>
+                *Not all issues have skills marked on them, especially if they are simple issues that do not require proficiency in any specific framework or language. Those issues will not appear when filtering by skill.
+               </p>
+            </form>
+          </div>
+
+          <!-- Issues Section -->
+          <div class="column" id="issues-container">
+            <p class="no-results">Loading issues...</p>
+          </div>
         </div>
       </div>
     </div>
-    <div class="body container">
-      <div id="vue-app">
-        {{ this.body }}
-        <noscript>
-          The issue finder requires JavaScript. You can try searching on GitHub
-          using the links below.
-          <ul class="gh-links">
-            <li>
-              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+-linked%3Apr">
-                issues labeled "good first issue"
-              </a>
-            </li>
-            <li>
-              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Aissue+is%3Aopen+label%3A%22help+wanted%22+-linked%3Apr">issues
-                labeled "help wanted"
-              </a>
-            </li>
-            <li>
-              <a href="https://github.com/search?q=org%3Acreativecommons+is%3Apr+is%3Aopen+label%3A%22help+wanted%22">
-                PRs labeled "help wanted"
-              </a>
-            </li>
-          </ul>
-        </noscript>
-      </div>
-    </div>
   </div>
 {% endblock %}