spothole/templates/cards/activities.html

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Activities</h5>
        <div class="card-text spothole-card-text">
            <ul class="list-unstyled filter-section-list ps-0">
                {% for section_type, heading, expanded in [("TRADITIONAL", "Traditional", True), ("ADVENTURE",
                "Adventure", True), ("REGIONAL", "Regional", False), ("EVENT", "Event", False)] %}
                {% set show_general_dx = include_general_dx and section_type == "TRADITIONAL" %}
                {% set section_activities = [a for a in activities if a.activity_type == section_type] %}
                {% if section_activities or show_general_dx %}
                {% set collapse_id = "activity-options-" + section_type.lower() + "-collapse" %}
                <li class="mb-1">
                    <button class="btn-toggle{% if not expanded %} collapsed{% end %}" data-bs-toggle="collapse"
                            data-bs-target="#{{ collapse_id }}" aria-expanded="{{ 'true' if expanded else 'false' }}"
                            aria-controls="{{ collapse_id }}">{{ heading }}
                    </button>
                    <div class="collapse filter-section-body{% if expanded %} show{% end %}" id="{{ collapse_id }}">
                        {% if show_general_dx %}
                        <div class="w-100 mb-1">
                            <div class="form-check">
                                <input type="checkbox"
                                       class="form-check-input filter-button-activity storeable-checkbox"
                                       id="filter-button-activity-NO_ACTIVITY" value="NO_ACTIVITY"
                                       autocomplete="off" onClick="filtersUpdated()" checked>
                                <label class="form-check-label" for="filter-button-activity-NO_ACTIVITY"><i
                                        class="fa-solid fa-tower-cell"></i> General DX</label>
                            </div>
                        </div>
                        {% end %}
                        <div class="row row-cols-2 g-1 mb-1">
                            {% for a in section_activities %}
                            <div class="col">
                                <div class="form-check">
                                    <input type="checkbox"
                                           class="form-check-input filter-button-activity storeable-checkbox"
                                           id="filter-button-activity-{{ dom_safe_name(a.name) }}" value="{{ a.name }}"
                                           autocomplete="off" onClick="filtersUpdated()" checked>
                                    <label class="form-check-label"
                                           for="filter-button-activity-{{ dom_safe_name(a.name) }}"
                                           title="{{ a.description }}"><i class="fa-solid {{ a.icon }}"></i> {{ a.name
                                        }}
                                        {{ a.region_flag or "" }}</label>
                                </div>
                            </div>
                            {% end %}
                        </div>
                    </div>
                </li>
                {% end %}
                {% end %}
            </ul>
            <div class="mt-1">
                <a href="#" onclick="toggleFilterButtons('activity', true); return false;">All</a> &nbsp;
                <a href="#" onclick="toggleFilterButtons('activity', false); return false;">None</a>
            </div>
        </div>
    </div>
</div>