module collection demo with tags and search

mod-collection-demo.html.twig

<style>
.mod-tags {}
.mod-tags .active { font-weight: bold; }
</style>

<h1>{{ module.name }} Collection</h1>

<form action="{{ module.link }}" method="get">
    <fieldset>

        {# When combining search with tag filters, you'll need the search form to add hidden fields for the selected tags #}
        {% for k, values in filters | filter((k,v) => k!='search') %}
            {% for v in values %}
            <input type="hidden" name="{{ k | escape }}[]" value="{{ v | escape }}">
            {% endfor %}
        {% endfor %}

        {# search field #}
        <input type="search" name="search" value="{{ filters.search | escape }}">
        <button type="submit">Search</button>
        <a href="{{ module.link }}">reset</a>

    </fieldset>
</form>

{# for all the tag groups setup, show a block for each with selectable tags inside #}
{% for tagGroup in module.tagGroups %}
    <br>
    <fieldset>
        <strong>{{ tagGroup.name }}</strong>
        <ul class="inline-list mod-tags">
            {% for tag in tagGroup.tags %}
                <li><a class="{{ tag.slug in filters[tagGroup.slug] ? 'active' : ''}}" href="{{ tag.link }}{{ filters.search ? '&search=' ~ filters.search | escape : '' }}">{{ tag.name }}</a></li>
            {% endfor %}
        </ul>
    </fieldset>
{% endfor %}

<ul>
    {# list out objects inside this module #}
    {% for object in objects %}

        {# to display each use the each.html.twig file in this same folder #}
        {% include module.template_folder ~ 'html/each.html.twig' %}

    {% else %}
        <li><em>None found</em></li>
    {% endfor %}
</ul>