{% extends "_layout.html.twig" %}
{% block title %}{{ category.title }}{% endblock %}
{% block content %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ pathPrefix }}index.html">Home</a></li>
            <li class="breadcrumb-item">{{ category.title }}</li>
        </ol>
    </nav>

    <div class="d-flex mb-4 align-items-center">
        <h2 class="mb-0">{{ category.title }}</h2>
        {%- include '_filters.html.twig' with { showBidiFilter: not category.rendering.menuview } -%}
    </div>

    {%- if category.rendering.menuview -%}
    <div class="menuview" id="iconlist">
        {%- for iconIdentifier in category.icons -%}
            {%- set icon = icons[iconIdentifier] -%}
            <a
                class="menuview-item"
                data-type="icon"
                data-identifier="{{ icon.identifier }}"
                data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}"
                href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html"
                title="{{ icon.identifier }}"
            >
                {%- for colorVariant in ['light', 'dark', 'accent1', 'accent2', 'accent3'] -%}
                <span class="modulemenu-preview" data-color="{{ colorVariant }}">
                    <span class="modulemenu-action">
                        <span class="modulemenu-icon">
                            {%- include '_icon.html.twig' with {
                                iconIdentifier: iconIdentifier,
                                iconSize: 'medium',
                                iconSpinning: category.rendering.spinning
                            } -%}
                        </span>
                        <span class="modulemenu-name">{{ icon.identifier }}</span>
                    </span>
                </span>
                {%- endfor -%}
            </a>
        {%- endfor -%}
    </div>
    {%- else -%}
    <div class="icongrid" id="iconlist">
        {%- for iconIdentifier in category.icons -%}
            {%- set icon = icons[iconIdentifier] -%}
            <a
                class="icongrid-item"
                data-type="icon"
                data-identifier="{{ icon.identifier }}"
                data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}"
                {% if icon._meta.bidi %}data-bidi="true"{% endif %}
                href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html"
                title="{{ icon.identifier }}"
            >
                {%- if not category.rendering.overlay -%}
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: iconIdentifier,
                        iconSize: 'medium',
                        iconSpinning: category.rendering.spinning
                    } -%}
                {%- else -%}
                    {%- include '_icon.html.twig' with {
                        iconIdentifier: 'apps-pagetree-page',
                        iconOverlayIdentifier: iconIdentifier,
                        iconSize: 'medium',
                        iconSpinning: category.rendering.spinning
                    } -%}
                {%- endif -%}
                {%- if icon._meta.bidi -%}
                    <span class="icongrid-item-badge" title="BiDi support - flips in RTL">BiDi</span>
                {%- endif -%}
            </a>
        {%- endfor -%}
    </div>
    {%- endif -%}

{% endblock %}