{% extends 'base/base.html' %}
{% load as_icon %}
{% load as_css_class %}
{% load get_category_icon %}
{% load static %}

{% block title %}Resources{% endblock %}
{% block head %}
    <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">
            <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">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">
                                            <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">
                                                {% 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>

                                {# 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>
                </div>

                {# Actual resources #}
                <div class="column is-two-thirds">
                    <div class="content is-flex is-justify-content-center">
                        <div>
                            {% for resource in resources.values %}
                                {% include "resources/resource_box.html" %}
                            {% endfor %}

                            {% for subcategory in subcategories %}
                                <h2 id="{{ subcategory.category_info.raw_name }}">
                                    <a href="whatevenisthis#{{ subcategory.category_info.raw_name }}">
                                        {{ subcategory.category_info.name }}
                                    </a>
                                </h2>
                                <p>{{ subcategory.category_info.description|safe }}</p>

                                {% for resource in subcategory.resources %}
                                    {% with category_info=subcategory.category_info %}
                                        {% include "resources/resource_box.html" %}
                                    {% endwith %}
                                {% endfor %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% else %}
        <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
    {% endif %}
{% endblock %}