{% 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">
        <h2 class="mb-0">Icons</h2>
        <form class="d-flex flex-nowrap ms-auto">
            <label for="search" class="sr-only">Search for icons</label>
            <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
        </form>
    </div>

    <div class="icongrid" id="iconlist">
        {%- for categoryItem in categories -%}
            {%- for iconIdentifier in categoryItem.icons -%}
                {%- set icon = icons[iconIdentifier] -%}
                <a class="icongrid-item" data-type="icon" data-identifier="{{ icon.identifier }}" data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}" href="{{ pathPrefix }}icons/{{ categoryItem.identifier }}/{{ icon.identifier }}.html" title="{{ icon.identifier }}">
                    {%- if not categoryItem.rendering.overlay -%}
                        {%- include '_icon.html.twig' with {
                            iconIdentifier: iconIdentifier,
                            iconSize: 'medium',
                            iconSpinning: categoryItem.rendering.spinning
                        } -%}
                    {%- else -%}
                        {%- include '_icon.html.twig' with {
                            iconIdentifier: 'apps-pagetree-page',
                            iconOverlayIdentifier: iconIdentifier,
                            iconSize: 'medium',
                            iconSpinning: categoryItem.rendering.spinning
                        } -%}
                    {%- endif -%}
                </a>
            {%- endfor -%}
        {%- endfor -%}
    </div>

{% endblock %}