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

    <nav>
        <ul class="breadcrumb mb-0 text-muted bg-transparent p-0">
            <li class="breadcrumb-item">Home</li>
        </ul>
    </nav>

    <div class="d-flex mb-4 align-items-center">
        <h2 class="mb-0">Icons</h2>
        {%- include '_filters.html.twig' -%}
    </div>

    <div class="icongrid" id="iconlist">
        {%- for category in categories -%}
            {%- 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 -%}
        {%- endfor -%}
    </div>

{% endblock %}