{% import _self as tree %}

{% macro render(taxons) %}
    {% import _self as tree %}

    <ul>
        {% for taxon in taxons %}
            <li data-id="{{ taxon.id }}" {% if taxon.children is not empty %}data-sylius-js-tree-parent="{{ taxon.id }}"{% endif %}>
                <div class="sylius-tree__item">
                    <div class="sylius-tree__icon" {% if taxon.children is not empty %}data-sylius-js-tree-trigger="{{ taxon.id }}"{% endif %}>
                        <i class="{{ taxon.children is not empty ? 'caret down' : 'angle left' }} icon"></i>
                    </div>
                    <div class="sylius-tree__title">
                        <a href="{{ path('sylius_admin_product_per_taxon_index', {'taxonId': taxon.id}) }}"{% if not taxon.enabled %} class="text gray"{% endif %}>
                            {{ taxon.name }}
                        </a>
                    </div>
                </div>
                {{ tree.render(taxon.children) }}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

<div class="ui vertical fluid labeled icon buttons">
    <a href="{{ path('sylius_admin_product_index') }}" class="ui primary button">
        <i class="search icon"></i>
        {{ 'sylius.ui.browse_all_products'|trans }}
    </a>

    <a href="{{ path('sylius_admin_taxon_create') }}" class="ui button">
        <i class="sitemap icon"></i>
        {{ 'sylius.ui.manage_taxons'|trans }}
    </a>
</div>

<div class="ui segment sylius-tree hidden" data-sylius-js-tree>
    <a href="#" class="sylius-tree__toggle-all" data-sylius-js-tree-trigger>
        <i class="icon">&bull;</i>{{ 'sylius.ui.toggle_all'|trans }}
    </a>
    {{ tree.render(taxons) }}
</div>