Make all tags interactive.

Adds a bunch of tag-related quality of life improvements:
- You can now see which filters you've added at the top left.
- You can click on tags to start filtering to that tag.
- You can click on tags in the filter box to remove the filter.
- Tags will now show an outline when they are active.

2 files changed, 119 insertions, 41 deletions

diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 09256751..476a4841 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -1,4 +1,5 @@
 {% load as_icon %}
+{% load as_css_class %}
 {% load get_category_icon %}
 
 <div class="box resource-box {{ resource.css_classes }}">
@@ -34,16 +35,44 @@
         {#  Tags #}
         <div class="is-flex ml-auto is-flex-wrap-wrap is-justify-content-end">
             {% for tag in resource.tags.topics %}
-            <span class="tag is-primary is-light ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag is-primary is-light ml-2 mt-2"
+                data-filter-name="topics"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.type %}
-            <span class="tag has-background-success-light has-text-success-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                data-filter-name="type"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.payment_tiers %}
-            <span class="tag has-background-danger-light has-text-danger-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                data-filter-name="payment-tiers"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.complexity %}
-            <span class="tag has-background-info-light has-text-info-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                data-filter-name="complexity"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
         </div>
     </div>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 134c826b..87c28153 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -1,74 +1,123 @@
 {% extends 'base/base.html' %}
 {% load as_icon %}
 {% load as_css_class %}
+{% load get_category_icon %}
 {% load static %}
 
 {% block title %}Resources{% endblock %}
 {% block head %}
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="{% static "js/resources.js" %}"></script>
-    <script src="{% static "js/content/page.js" %}"></script>
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
     <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
     <link rel="stylesheet" href="{% static "css/content/page.css" %}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script defer src="{% static "js/resources.js" %}"></script>
+    <script defer src="{% static "js/content/page.js" %}"></script>
 {% endblock %}
 
 {% block content %}
     {% include "base/navbar.html" %}
     {% if resources|length > 0 %}
         <section class="section">
-            {#  Headline #}
-            <div class="content">
-                <h1 class="resource-title has-text-centered">Resources</h1>
-                <hr/>
-            </div>
-
             <div class="columns is-centered">
                 {# Filtering toolbox #}
                 <div class="column is-one-third">
                     <div class="content is-justify-content-center">
                         <nav id="resource-filtering-panel" class="panel is-primary">
-                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filters</p>
+                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p>
+
+                            {# Filter box tags #}
+                            <div class="card filter-tags">
+                                <div class="is-flex ml-auto is-flex-wrap-wrap">
+                                    {% for filter_name, filter_data in filters.items %}
+                                        {% for filter_item in filter_data.filters %}
+                                            {% if filter_name == "Complexity" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-info has-background-info-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Type" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-success has-background-success-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Payment tiers" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-danger has-background-danger-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Topics" %}
+                                                <span
+                                                    class="filter-box-tag tag is-primary is-light ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-primary has-background-primary-light"></button>
+                                                </span>
+                                            {% endif %}
+                                        {% endfor %}
+                                    {% endfor %}
+                                </div>
+                            </div>
 
                             {# Filter checkboxes #}
                             {% for filter_name, filter_data in filters.items %}
-                                    <div class="card">
-                                        <button type="button" class="card-header collapsible">
+                                <div class="card">
+                                <button type="button" class="card-header collapsible">
                                             <span class="card-header-title subtitle is-6 my-2 ml-2">
                                                 <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>&nbsp&nbsp{{ filter_name }}
                                             </span>
-                                            <span class="card-header-icon">
+                                    <span class="card-header-icon">
                                                 {% if not filter_data.hidden %}
                                                     <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i>
                                                 {% else %}
                                                     <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i>
                                                 {% endif %}
                                             </span>
-                                        </button>
+                                </button>
 
-                                        {# Checkboxes #}
-                                        {% if filter_data.hidden %}
-                                            <div class="collapsible-content">
-                                        {% else %}
-                                            <div class="collapsible-content" style="max-height: 480px;">
-                                        {% endif %}
-                                            <div class="card-content">
-                                                {% for filter_item in filter_data.filters %}
-                                                    <a class="panel-block filter-panel">
-                                                        <label class="checkbox">
-                                                          <input
-                                                            class="filter-checkbox"
-                                                            type="checkbox"
-                                                            data-filter-name="{{ filter_name|as_css_class }}"
-                                                            data-filter-item="{{ filter_item|as_css_class }}"
-                                                          >
-                                                            {{ filter_item }}
-                                                        </label>
-                                                    </a>
-                                                {% endfor %}
-                                            </div>
-                                        </div>
-                                    </div>
+                                {# Checkboxes #}
+                                {% if filter_data.hidden %}
+                                    <div class="collapsible-content">
+                                {% else %}
+                                    <div class="collapsible-content" style="max-height: 480px;">
+                                {% endif %}
+                            <div class="card-content">
+                                {% for filter_item in filter_data.filters %}
+                                    <a class="panel-block filter-panel">
+                                        <label class="checkbox">
+                                            <input
+                                                    class="filter-checkbox"
+                                                    type="checkbox"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                            >
+                                            {{ filter_item }}
+                                        </label>
+                                    </a>
+                                {% endfor %}
+                            </div>
+                            </div>
+                            </div>
                             {% endfor %}
                         </nav>
                     </div>