Implement more UI elements

core/templates/ui/drilldown.html

@@ -2,6 +2,38 @@
 {% load static %}
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script>
+    function initTabs() {
+    TABS.forEach((tab) => {
+      tab.addEventListener('click', (e) => {
+        let selected = tab.getAttribute('data-tab');
+        updateActiveTab(tab);
+        updateActiveContent(selected);
+      })
+    })
+  }
+
+  function updateActiveTab(selected) {
+    TABS.forEach((tab) => {
+      if (tab && tab.classList.contains(ACTIVE_CLASS)) {
+        tab.classList.remove(ACTIVE_CLASS);
+      }
+    });
+    selected.classList.add(ACTIVE_CLASS);
+  }
+
+  function updateActiveContent(selected) {
+    CONTENT.forEach((item) => {
+      if (item && item.classList.contains(ACTIVE_CLASS)) {
+        item.classList.remove(ACTIVE_CLASS);
+      }
+      let data = item.getAttribute('data-content');
+      if (data === selected) {
+        item.classList.add(ACTIVE_CLASS);
+      }
+    });
+  }
+  </script>
   <div class="box">
     <form method="POST">
       {% csrf_token %}
@@ -10,7 +42,7 @@
         <div class="field-body">
           <div class="field">
             <div class="control is-expanded has-icons-left">
-              <input name="query" class="input" type="text" placeholder="Query">
+              <input name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
               <span class="icon is-small is-left">
                 <i class="fas fa-magnifying-glass"></i>
               </span>