Rewrite filters to better ui

templates/snip/index.html.twig

@@ -1,23 +1,12 @@
-{% extends 'base/one.column.html.twig' %}
+{% extends 'base/two.column.html.twig' %}
 
 {% set title = 'My Snips' %}
 
-{% block body %}
+{% block column1 %}
+    <h3>Snips</h3>
     <a class="btn btn-success" href="{{ path('snip_new') }}">
         <i class="fa fa-plus"></i> Add
     </a>
-    {% if request.onlyVisible %}
-        <a class="btn btn-secondary" href="{{ path('snip_index', {onlyVisible: false}) }}">Show hidden</a>
-    {% else %}
-        <a class="btn btn-secondary" href="{{ path('snip_index', {onlyVisible: true}) }}">Hide hidden</a>
-    {% endif %}
-
-    {% if request.sort != 'name' %}
-        <a class="btn btn-secondary" href="{{ path('snip_index', {sort: 'name'}) }}">Sort by name</a>
-    {% endif %}
-    {% if request.sort != 'date' %}
-        <a class="btn btn-secondary" href="{{ path('snip_index', {sort: 'date'}) }}">Sort by date</a>
-    {% endif %}
 
     <br><br>
     <div class="list-group">
@@ -30,4 +19,29 @@
             </a>
         {% endfor %}
     </div>
+{% endblock %}
+
+{% block column2 %}
+    <h3>Filters</h3>
+
+    <h5>Ordering</h5>
+    <div class="list-group">
+        {% for sortOption in ['name', 'date'] %}
+            <a href="{{ path('snip_index', {sort: sortOption}) }}"
+               class="list-group-item list-group-item-action {% if sortOption is same as(request.sort) %}list-group-item-primary{% endif %}">
+                Sort by {{ sortOption|capitalize }}
+            </a>
+        {% endfor %}
+    </div>
+    
+    <br>
+    <h5>Visibility</h5>
+    <div class="list-group">
+        {% for visibilityOption in ['all', 'visible', 'hidden'] %}
+            <a href="{{ path('snip_index', {visibility: visibilityOption}) }}"
+               class="list-group-item list-group-item-action {% if request.visibility is same as(visibilityOption) %}list-group-item-primary{% endif %}">
+                Show {{ visibilityOption|capitalize }}
+            </a>
+        {% endfor %}
+    </div>
 {% endblock %}