{% 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">
        <h2 class="mb-0">{{ category.title }}</h2>
        <form class="d-flex flex-nowrap ms-auto">
            <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
        </form>
    </div>

    <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(' ') }}" 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 -%}
            </a>
        {%- endfor -%}
    </div>

{% endblock %}