implement toggle view to show subscribed only

tubearchivist/home/templates/home/channel.html

@@ -30,19 +30,26 @@
         </form>
     </div>
 </div>
-<div class="view-icons">
+<div class="view-controls">
-    <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
+    <div class="toggle">
-    <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
+        <span>Show only subscribed channels:</span>
-</div>
+        <div class="toggleBox">
-<div class="padding-box">
+            <input 
-    <h2>Total matching channels: {{ max_hits }}</h2>
+                id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
-    <span>Change show / hide subscribed only </span><span class="settings-current">{{ show_subed_only }}</span>
+                {% if show_subed_only %}
-    <select name="watched" id="watched" onchange="showSubscribedOnly(this.value)">
+                    checked
-        <option value="" disabled selected> -- change -- </option>
+                {% endif %}
-        <option value="0">show all channels</option>
+                >
-        <option value="1">show subscribed channels only</option>
+            <label for="" class="onbtn">On</label>
-    </select>
+            <label for="" class="ofbtn">Off</label>
+        </div>
+    </div>
+    <div class="view-icons">
+        <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
+        <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
+    </div>
 </div>
+<h2>Total matching channels: {{ max_hits }}</h2>
 <div class="channel-list {{ view_style }}">
     {% if channels %}
         {% for channel in channels %}