{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
{% import _self as tree %}

{% macro render(taxons) %}
    {% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
    {% import _self as tree %}

    <ul>
        {% for taxon in taxons|filter(taxon => taxon.id is not null) %}
            <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 class="sylius-tree__action">
                        <form action="{{ path('sylius_admin_taxon_delete', { 'id': taxon.id }) }}" method="post">
                            <div class="ui tiny basic icon top right pointing dropdown button sylius-tree__action__trigger">
                            <i class="ellipsis horizontal icon"></i>
                                <div class="menu">
                                    <a class="item" href="{{ path('sylius_admin_taxon_create_for_parent', { 'id': taxon.id }) }}">
                                        <i class="plus icon blue"></i>{{ 'sylius.ui.create'|trans }}
                                    </a>
                                    <a class="item" href="{{ path('sylius_admin_taxon_update', { 'id': taxon.id }) }}">
                                        <i class="pencil icon grey"></i>{{ 'sylius.ui.edit'|trans }}
                                    </a>
                                    <button class="item" type="submit" style="width: 100%;" data-requires-confirmation>
                                        <i class="icon trash red"></i>{{ 'sylius.ui.delete'|trans }}
                                    </button>

                                    <div class="divider"></div>

                                    <div class="item sylius-taxon-move-up" data-url="{{ path('sylius_admin_ajax_taxon_move_up', { id: taxon.id }) }}">
                                        <i class="arrow up icon grey"></i>{{ 'sylius.ui.move_up'|trans }}
                                    </div>
                                    <div class="item sylius-taxon-move-down" data-url="{{ path('sylius_admin_ajax_taxon_move_down', { id: taxon.id }) }}">
                                        <i class="arrow down icon grey"></i>{{ 'sylius.ui.move_down'|trans }}
                                    </div>

                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token(taxon.id) }}" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                {{ tree.render(taxon.children) }}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

<div class="ui segment sylius-tree hidden" data-sylius-js-tree>
    <a href="{{ path('sylius_admin_taxon_create') }}" class="ui fluid labeled icon primary button">
        <i class="plus icon"></i>
        {{ 'sylius.ui.create'|trans }}
    </a>

    <div class="ui hidden divider small"></div>

    <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>