From 08c3e85f7ed9b221c35b7c13896a0eb6ff2d6c5b Mon Sep 17 00:00:00 2001
From: Wojdylak <karolwojdyla37@gmail.com>
Date: Fri, 10 May 2024 14:23:48 +0200
Subject: [PATCH] [Admin][Taxon] Implements media management

---
 .../AdminBundle/Form/Type/TaxonType.php       |  47 ++
 .../config/app/twig_hooks/taxon/create.yaml   |  37 +-
 .../config/app/twig_hooks/taxon/update.yaml   |  39 +-
 .../Resources/config/routing/taxon.yml        |   9 +-
 .../config/services/twig/component.xml        |  16 +-
 .../Twig/Component/Taxon/FormComponent.php    |  46 ++
 .../Twig/Component/Taxon/TreeComponent.php    |   4 +-
 .../taxon/component/taxon_tree.html.twig      |  68 ---
 .../templates/taxon/create/form.html.twig     |  10 -
 .../templates/taxon/form/sections.html.twig   |   3 -
 .../form/sections/details/code.html.twig      |   1 -
 .../taxon/form/sections/media.html.twig       |  29 --
 .../templates/taxon/form/tree.html.twig       | 400 ------------------
 .../{taxon_tree.html.twig => tree.html.twig}  |  11 +-
 .../templates/taxon/sections.html.twig        |  12 +
 .../templates/taxon/sections/form.html.twig   |  16 +
 .../form}/details.html.twig                   |   0
 .../sections/form/details/code.html.twig      |   1 +
 .../form}/details/enabled.html.twig           |   0
 .../form}/details/parent.html.twig            |   0
 .../taxon/sections/form/media.html.twig       |  46 ++
 .../form}/translations.html.twig              |  13 +-
 .../templates/taxon/sections/tree.html.twig   |  16 +
 .../templates/taxon/update/form.html.twig     |  10 -
 24 files changed, 263 insertions(+), 571 deletions(-)
 create mode 100644 src/Sylius/Bundle/AdminBundle/Form/Type/TaxonType.php
 create mode 100644 src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/FormComponent.php
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/component/taxon_tree.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/create/form.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/code.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/media.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/form/tree.html.twig
 rename src/Sylius/Bundle/AdminBundle/templates/taxon/helper/{taxon_tree.html.twig => tree.html.twig} (92%)
 create mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/sections.html.twig
 create mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form.html.twig
 rename src/Sylius/Bundle/AdminBundle/templates/taxon/{form/sections => sections/form}/details.html.twig (100%)
 create mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/code.html.twig
 rename src/Sylius/Bundle/AdminBundle/templates/taxon/{form/sections => sections/form}/details/enabled.html.twig (100%)
 rename src/Sylius/Bundle/AdminBundle/templates/taxon/{form/sections => sections/form}/details/parent.html.twig (100%)
 create mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/media.html.twig
 rename src/Sylius/Bundle/AdminBundle/templates/taxon/{form/sections => sections/form}/translations.html.twig (65%)
 create mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/sections/tree.html.twig
 delete mode 100644 src/Sylius/Bundle/AdminBundle/templates/taxon/update/form.html.twig

diff --git a/src/Sylius/Bundle/AdminBundle/Form/Type/TaxonType.php b/src/Sylius/Bundle/AdminBundle/Form/Type/TaxonType.php
new file mode 100644
index 00000000000..d4cbafb1c27
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/Form/Type/TaxonType.php
@@ -0,0 +1,47 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\AdminBundle\Form\Type;
+
+use Sylius\Bundle\CoreBundle\Form\Type\Taxon\TaxonImageType;
+use Sylius\Bundle\TaxonomyBundle\Form\Type\TaxonType as BaseTaxonType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
+
+final class TaxonType extends AbstractType
+{
+    /** @param array<string, mixed> $options */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('images', LiveCollectionType::class, [
+                'entry_type' => TaxonImageType::class,
+                'allow_add' => true,
+                'allow_delete' => true,
+                'by_reference' => false,
+                'button_add_options' => [
+                    'label' => 'sylius.ui.add_image',
+                ],
+                'button_delete_options' => [
+                    'label' => 'sylius.ui.delete',
+                ],
+            ])
+        ;
+    }
+
+    public function getParent(): string
+    {
+        return BaseTaxonType::class;
+    }
+}
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/create.yaml b/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/create.yaml
index 78e73feb927..b0280c4c9b7 100644
--- a/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/create.yaml
+++ b/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/create.yaml
@@ -2,28 +2,33 @@ twig_hooks:
     hooks:
         'sylius_admin.taxon.create.content':
             form:
-                template: '@SyliusAdmin/taxon/create/form.html.twig'
-                configuration:
-                    render_rest: false
-
-        'sylius_admin.taxon.create.content.form':
+                enabled: false
+            sections:
+                template: '@SyliusAdmin/taxon/sections.html.twig'
+        
+        'sylius_admin.taxon.create.content.sections#left':
             tree:
                 component: 'sylius_admin:taxon:tree'
-            sections:
-                template: '@SyliusAdmin/taxon/form/sections.html.twig'
 
-        'sylius_admin.taxon.create.content.form.sections':
+        'sylius_admin.taxon.create.content.sections#right':
+            form:
+                component: 'sylius_admin:taxon:form'
+                props:
+                    form: '@=_context.form'
+                    resource: '@=_context.resource'
+                
+        'sylius_admin.taxon.create.content.sections.form':
             details:
-                template: '@SyliusAdmin/taxon/form/sections/details.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details.html.twig'
             translations:
-                template: '@SyliusAdmin/taxon/form/sections/translations.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/translations.html.twig'
             media:
-                template: '@SyliusAdmin/taxon/form/sections/media.html.twig'
-
-        'sylius_admin.taxon.create.content.form.sections.details':
+                template: '@SyliusAdmin/taxon/sections/form/media.html.twig'
+        
+        'sylius_admin.taxon.create.content.sections.form.details':
             code:
-                template: '@SyliusAdmin/taxon/form/sections/details/code.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/code.html.twig'
             parent:
-                template: '@SyliusAdmin/taxon/form/sections/details/parent.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/parent.html.twig'
             enabled:
-                template: '@SyliusAdmin/taxon/form/sections/details/enabled.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/enabled.html.twig'
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/update.yaml b/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/update.yaml
index 58d48c5aa9c..50de425af72 100644
--- a/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/update.yaml
+++ b/src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/taxon/update.yaml
@@ -2,28 +2,35 @@ twig_hooks:
     hooks:
         'sylius_admin.taxon.update.content':
             form:
-                template: '@SyliusAdmin/taxon/update/form.html.twig'
-                configuration:
-                    render_rest: false
-
-        'sylius_admin.taxon.update.content.form':
+                enabled: false
+            sections:
+                template: '@SyliusAdmin/taxon/sections.html.twig'
+        
+        'sylius_admin.taxon.update.content.sections#left':
             tree:
                 component: 'sylius_admin:taxon:tree'
-            sections:
-                template: '@SyliusAdmin/taxon/form/sections.html.twig'
 
-        'sylius_admin.taxon.update.content.form.sections':
+        'sylius_admin.taxon.update.content.sections#right':
+            form:
+                component: 'sylius_admin:taxon:form'
+                props:
+                    form: '@=_context.form'
+                    resource: '@=_context.resource'
+                configuration:
+                    method: 'PUT'
+        
+        'sylius_admin.taxon.update.content.sections.form':
             details:
-                template: '@SyliusAdmin/taxon/form/sections/details.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details.html.twig'
             translations:
-                template: '@SyliusAdmin/taxon/form/sections/translations.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/translations.html.twig'
             media:
-                template: '@SyliusAdmin/taxon/form/sections/media.html.twig'
-
-        'sylius_admin.taxon.update.content.form.sections.details':
+                template: '@SyliusAdmin/taxon/sections/form/media.html.twig'
+        
+        'sylius_admin.taxon.update.content.sections.form.details':
             code:
-                template: '@SyliusAdmin/taxon/form/sections/details/code.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/code.html.twig'
             parent:
-                template: '@SyliusAdmin/taxon/form/sections/details/parent.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/parent.html.twig'
             enabled:
-                template: '@SyliusAdmin/taxon/form/sections/details/enabled.html.twig'
+                template: '@SyliusAdmin/taxon/sections/form/details/enabled.html.twig'
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/config/routing/taxon.yml b/src/Sylius/Bundle/AdminBundle/Resources/config/routing/taxon.yml
index 0881c0f908b..f35b1b0874b 100644
--- a/src/Sylius/Bundle/AdminBundle/Resources/config/routing/taxon.yml
+++ b/src/Sylius/Bundle/AdminBundle/Resources/config/routing/taxon.yml
@@ -6,11 +6,8 @@ sylius_admin_taxon:
         except: ['show', 'index']
         redirect: update
         permission: true
-        vars:
-            all:
-                subheader: sylius.ui.manage_categorization_of_your_products
-                templates:
-                    form: "@SyliusAdmin/Taxon/_form.html.twig"
+        form:
+            type: Sylius\Bundle\AdminBundle\Form\Type\TaxonType
     type: sylius.resource
 
 sylius_admin_taxon_index:
@@ -31,6 +28,8 @@ sylius_admin_taxon_create_for_parent:
             permission: true
             template: '@SyliusAdmin/shared/crud/create.html.twig'
             redirect: sylius_admin_taxon_update
+            form:
+                type: Sylius\Bundle\AdminBundle\Form\Type\TaxonType
             factory:
                 method: createForParent
                 arguments: ['expr:notFoundOnNull(service("sylius.repository.taxon").find($id))']
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/config/services/twig/component.xml b/src/Sylius/Bundle/AdminBundle/Resources/config/services/twig/component.xml
index f5178441aa2..0b1c5c2cbfa 100644
--- a/src/Sylius/Bundle/AdminBundle/Resources/config/services/twig/component.xml
+++ b/src/Sylius/Bundle/AdminBundle/Resources/config/services/twig/component.xml
@@ -274,6 +274,20 @@
             />
         </service>
 
+        <service
+            id="sylius_admin.twig.component.taxon.form"
+            class="Sylius\Bundle\AdminBundle\Twig\Component\Taxon\FormComponent"
+        >
+            <argument type="service" id="form.factory" />
+            <argument>Sylius\Bundle\AdminBundle\Form\Type\TaxonType</argument>
+
+            <tag
+                name="sylius.live_component"
+                key="sylius_admin:taxon:form"
+                template="@SyliusAdmin/taxon/sections/form.html.twig"
+            />
+        </service>
+
         <service
             id="sylius_admin.twig.component.taxon.tree"
             class="Sylius\Bundle\AdminBundle\Twig\Component\Taxon\TreeComponent"
@@ -284,7 +298,7 @@
             <tag
                 name="sylius.live_component"
                 key="sylius_admin:taxon:tree"
-                template="@SyliusAdmin/taxon/component/taxon_tree.html.twig"
+                template="@SyliusAdmin/taxon/sections/tree.html.twig"
             />
         </service>
 
diff --git a/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/FormComponent.php b/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/FormComponent.php
new file mode 100644
index 00000000000..9d2d1f87d7c
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/FormComponent.php
@@ -0,0 +1,46 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\AdminBundle\Twig\Component\Taxon;
+
+use Sylius\Component\Core\Model\Taxon;
+use Sylius\TwigHooks\LiveComponent\HookableLiveComponentTrait;
+use Symfony\Component\Form\FormFactoryInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\LiveCollectionTrait;
+
+#[AsLiveComponent(name: 'sylius_admin:taxon:form', template: '@SyliusAdmin/taxon/sections/form.html.twig')]
+class FormComponent
+{
+    use DefaultActionTrait;
+    use HookableLiveComponentTrait;
+    use LiveCollectionTrait;
+
+    #[LiveProp(fieldName: 'resource')]
+    public ?Taxon $resource = null;
+
+    /** @param class-string $formClass */
+    public function __construct(
+        private readonly FormFactoryInterface $formFactory,
+        private readonly string $formClass,
+    ) {
+    }
+
+    protected function instantiateForm(): FormInterface
+    {
+        return $this->formFactory->create($this->formClass, $this->resource);
+    }
+}
diff --git a/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/TreeComponent.php b/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/TreeComponent.php
index 0c6f56d5a28..41860b0d4f7 100644
--- a/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/TreeComponent.php
+++ b/src/Sylius/Bundle/AdminBundle/Twig/Component/Taxon/TreeComponent.php
@@ -33,8 +33,8 @@ class TreeComponent
      * @param TaxonRepositoryInterface<TaxonInterface> $taxonRepository
      */
     public function __construct(
-        private TaxonRepositoryInterface $taxonRepository,
-        private ObjectManager $taxonManager,
+        private readonly TaxonRepositoryInterface $taxonRepository,
+        private readonly ObjectManager $taxonManager,
     ) {
     }
 
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/component/taxon_tree.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/component/taxon_tree.html.twig
deleted file mode 100644
index 1afac51a3d6..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/component/taxon_tree.html.twig
+++ /dev/null
@@ -1,68 +0,0 @@
-{% import '@SyliusAdmin/taxon/helper/taxon_tree.html.twig' as taxonTree %}
-
-<div class="col-12 col-md-4" {{ attributes }}>
-    <div class="card mb-5" data-js-tree="container">
-        <div class="card-body relative">
-            <div class="mb-3">
-                <button data-js-tree="toggle-all" type="button" class="btn btn-sm">Toggle All</button>
-            </div>
-
-            <div>
-                {{ taxonTree.render(rootNodes) }}
-            </div>
-        </div>
-    </div>
-</div>
-
-{#{% 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 %}#}
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/create/form.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/create/form.html.twig
deleted file mode 100644
index 84c9c9955bb..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/create/form.html.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends '@SyliusAdmin/shared/crud/create/content/form.html.twig' %}
-
-{% block form_content %}
-    <div class="row">
-        {{ form_errors(form) }}
-        {{ form_widget(form._token) }}
-
-        {{ parent() }}
-    </div>
-{% endblock %}
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections.html.twig
deleted file mode 100644
index c76fe7d14d8..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="col-12 col-md-8">
-    {% hook 'sections' %}
-</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/code.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/code.html.twig
deleted file mode 100644
index b39aacad1d9..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/code.html.twig
+++ /dev/null
@@ -1 +0,0 @@
-{{ form_row(hookable_metadata.context.form.code) }}
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/media.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/media.html.twig
deleted file mode 100644
index 8a07ae443d3..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/media.html.twig
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="card mb-3">
-    <div class="card-header">
-        <h2 id="productMedia" class="card-title">
-            {{ 'sylius.ui.media'|trans }} <span class="badge">{{ 'sylius.ui.work_in_progress'|trans }}</span>
-        </h2>
-    </div>
-    <div class="card-body">
-        <div class="row mb-4">
-            <div class="col-auto">
-                <span class="avatar avatar-xl" style="background-image: url(https://picsum.photos/500/500)"></span>
-            </div>
-            <div class="col">
-                <div class="mb-3">
-                    <label for="type" class="form-label      ">Type</label>
-                    <input type="text" id="type" value="main" class="form-control      ">
-                </div>
-                <div class="mb-3">
-                    <button type="button" class="btn">
-                        Remove
-                    </button>
-
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="card-footer">
-        <button class="btn" type="button">Add</button>
-    </div>
-</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/tree.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/form/tree.html.twig
deleted file mode 100644
index db9683d6072..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/tree.html.twig
+++ /dev/null
@@ -1,400 +0,0 @@
-<div class="col-12 col-md-4">
-    <div class="card mb-5" data-js-tree="container">
-        <div class="card-body">
-            <div class="mb-3">
-                <button data-js-tree="toggle-all" type="button" class="btn btn-sm">Toggle All</button>
-            </div>
-            <ul class="tree">
-                <li class="expanded">
-
-                    <div class="tree-header expanded" data-js-tree="toggle">
-                        <div class="d-flex justify-content-between">
-                            <div class="tree-header-btn" data-js-tree="toggle-btn">
-                    <span class="tree-icon tree-icon-right">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M9 6l6 6l-6 6"></path>
-                        </svg>
-                    </span>
-                                <span class="tree-icon tree-icon-down">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M6 9l6 6l6 -6"></path>
-                        </svg>
-                    </span>
-                                Category
-                            </div>
-                            <div>    <div class="dropdown">
-                                    <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                            <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                            <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                            <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                        </svg>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li><a class="dropdown-item" href="#">Create</a></li>
-                                        <li><a class="dropdown-item" href="#">Edit</a></li>
-                                        <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                        <li><a class="dropdown-item" href="#">Move up</a></li>
-                                        <li><a class="dropdown-item" href="#">Move down</a></li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul class="tree-items" style="display: block;">
-                        <li class="expanded">
-
-                            <div class="tree-header expanded" data-js-tree="toggle">
-                                <div class="d-flex justify-content-between">
-                                    <div class="tree-header-btn" data-js-tree="toggle-btn">
-                    <span class="tree-icon tree-icon-right">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M9 6l6 6l-6 6"></path>
-                        </svg>
-                    </span>
-                                        <span class="tree-icon tree-icon-down">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M6 9l6 6l6 -6"></path>
-                        </svg>
-                    </span>
-                                        T-shirt
-                                    </div>
-                                    <div>    <div class="dropdown">
-                                            <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                    <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                </svg>
-                                            </button>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="#">Create</a></li>
-                                                <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                <li><a class="dropdown-item" href="#">Move down</a></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul class="tree-items" style="display: block;">
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            Man
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            Women
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                        <li class="expanded">
-
-                            <div class="tree-header expanded" data-js-tree="toggle">
-                                <div class="d-flex justify-content-between">
-                                    <div class="tree-header-btn" data-js-tree="toggle-btn">
-                    <span class="tree-icon tree-icon-right">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M9 6l6 6l-6 6"></path>
-                        </svg>
-                    </span>
-                                        <span class="tree-icon tree-icon-down">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M6 9l6 6l6 -6"></path>
-                        </svg>
-                    </span>
-                                        Caps
-                                    </div>
-                                    <div>    <div class="dropdown">
-                                            <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                    <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                </svg>
-                                            </button>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="#">Create</a></li>
-                                                <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                <li><a class="dropdown-item" href="#">Move down</a></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul class="tree-items" style="display: block;">
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            Simple
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            With pompons
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                        <li>
-                            <div class="d-flex justify-content-between">
-                                <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                    Dresses
-                                </a>
-                                <div>    <div class="dropdown">
-                                        <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                            </svg>
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            <li><a class="dropdown-item" href="#">Create</a></li>
-                                            <li><a class="dropdown-item" href="#">Edit</a></li>
-                                            <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                            <li><a class="dropdown-item" href="#">Move up</a></li>
-                                            <li><a class="dropdown-item" href="#">Move down</a></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="expanded">
-
-                            <div class="tree-header expanded" data-js-tree="toggle">
-                                <div class="d-flex justify-content-between">
-                                    <div class="tree-header-btn" data-js-tree="toggle-btn">
-                    <span class="tree-icon tree-icon-right">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M9 6l6 6l-6 6"></path>
-                        </svg>
-                    </span>
-                                        <span class="tree-icon tree-icon-down">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                           <path d="M6 9l6 6l6 -6"></path>
-                        </svg>
-                    </span>
-                                        Jeans
-                                    </div>
-                                    <div>    <div class="dropdown">
-                                            <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                    <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                </svg>
-                                            </button>
-                                            <ul class="dropdown-menu">
-                                                <li><a class="dropdown-item" href="#">Create</a></li>
-                                                <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                <li><a class="dropdown-item" href="#">Move down</a></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <ul class="tree-items" style="display: block;">
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            Man
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div class="d-flex justify-content-between">
-                                        <a class="d-flex" href="#">
-                <span class="tree-icon tree-icon-dot">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="10" height="10" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                       <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path>
-                    </svg>
-                </span>
-                                            Women
-                                        </a>
-                                        <div>    <div class="dropdown">
-                                                <button class="btn btn-sm" type="button" data-bs-toggle="dropdown">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" class="" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                                        <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                        <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-                                                    </svg>
-                                                </button>
-                                                <ul class="dropdown-menu">
-                                                    <li><a class="dropdown-item" href="#">Create</a></li>
-                                                    <li><a class="dropdown-item" href="#">Edit</a></li>
-                                                    <li><form><button type="submit" class="dropdown-item" data-confirm-btn-submit="">Delete</button></form></li>
-                                                    <li><a class="dropdown-item" href="#">Move up</a></li>
-                                                    <li><a class="dropdown-item" href="#">Move down</a></li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
-    </div>
-</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/helper/taxon_tree.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/helper/tree.html.twig
similarity index 92%
rename from src/Sylius/Bundle/AdminBundle/templates/taxon/helper/taxon_tree.html.twig
rename to src/Sylius/Bundle/AdminBundle/templates/taxon/helper/tree.html.twig
index 52c3a78892a..bd931c05195 100644
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/helper/taxon_tree.html.twig
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/helper/tree.html.twig
@@ -27,7 +27,8 @@
                     role="button"
                     class="dropdown-item"
                     data-action="live#action"
-                    data-live-action-param="prevent|delete(taxonId={{ taxonId }})"
+                    data-live-action-param="prevent|delete"
+                    data-live-taxon-id-param="{{ taxonId }}"
                 >
                     {{ 'sylius.ui.delete'|trans }}
                 </button>
@@ -37,7 +38,8 @@
                     role="button"
                     class="dropdown-item"
                     data-action="live#action"
-                    data-live-action-param="prevent|moveUp(taxonId={{ taxonId }})"
+                    data-live-action-param="prevent|moveUp"
+                    data-live-taxon-id-param="{{ taxonId }}"
                 >
                     {{ 'sylius.ui.move_up'|trans }}
                 </button>
@@ -47,7 +49,8 @@
                     role="button"
                     class="dropdown-item"
                     data-action="live#action"
-                    data-live-action-param="prevent|moveDown(taxonId={{ taxonId }})"
+                    data-live-action-param="prevent|moveDown"
+                    data-live-taxon-id-param="{{ taxonId }}"
                 >
                     {{ 'sylius.ui.move_down'|trans }}
                 </button>
@@ -99,7 +102,7 @@
 {% endmacro %}
 
 {% macro render(taxons, nested = false) %}
-    {% import '@SyliusAdmin/taxon/helper/taxon_tree.html.twig' as _self %}
+    {% import '@SyliusAdmin/taxon/helper/tree.html.twig' as _self %}
 
     <ul class="{% if nested %}tree-items{% else %}tree{% endif %}">
         {% if nested == false %}
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/sections.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections.html.twig
new file mode 100644
index 00000000000..024b0d1e573
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections.html.twig
@@ -0,0 +1,12 @@
+<div class="page-body">
+    <div class="container-xl">
+        <div class="row">
+            <div class="col-12 col-lg-4">
+                {% hook 'sections#left' %}
+            </div>
+            <div class="col-12 col-lg-8">
+                {% hook 'sections#right' %}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form.html.twig
new file mode 100644
index 00000000000..43dd134ecd9
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form.html.twig
@@ -0,0 +1,16 @@
+{# Rendered with \Sylius\Bundle\AdminBundle\Twig\Component\Taxon\FormComponent #}
+
+{% form_theme form '@SyliusAdmin/shared/form_theme.html.twig' %}
+
+<div {{ attributes }}>
+    {{ form_start(form, {'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate', 'id': form.vars.id}}) }}
+    {% if hookable_metadata.configuration.method is defined %}
+        <input type="hidden" name="_method" value="{{ hookable_metadata.configuration.method }}" />
+    {% endif %}
+    {{ form_errors(form) }}
+    {{ form_widget(form._token) }}
+
+    {% hook 'form' with { form } %}
+
+    {{ form_end(form, {render_rest: hookable.configuration.render_rest|default(false)}) }}
+</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details.html.twig
similarity index 100%
rename from src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details.html.twig
rename to src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details.html.twig
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/code.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/code.html.twig
new file mode 100644
index 00000000000..fed599e8cff
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/code.html.twig
@@ -0,0 +1 @@
+{{ form_row(hookable_metadata.context.form.code, sylius_test_form_attribute('code')) }}
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/enabled.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/enabled.html.twig
similarity index 100%
rename from src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/enabled.html.twig
rename to src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/enabled.html.twig
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/parent.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/parent.html.twig
similarity index 100%
rename from src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/details/parent.html.twig
rename to src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/details/parent.html.twig
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/media.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/media.html.twig
new file mode 100644
index 00000000000..308781649e0
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/media.html.twig
@@ -0,0 +1,46 @@
+{% set form = hookable_metadata.context.form %}
+
+<div {{ sylius_test_html_attribute('images') }}>
+    <div class="card mb-3">
+        <div class="card-header">
+            <h2 class="card-title">
+                {{ 'sylius.ui.media'|trans }}
+            </h2>
+        </div>
+        <div class="card-body">
+            <div class="row">
+                {% for imageForm in form.images %}
+                    <div class="col-12 col-md-6 row mb-4" {{ sylius_test_html_attribute('image')}}
+                        {{ sylius_test_html_attribute('type', imageForm.type.vars.value) }}
+                        {{ sylius_test_html_attribute('image-url', imageForm.vars.value.path ? imageForm.vars.value.path|imagine_filter('sylius_small') : null) }}
+                    >
+                        <div class="col-auto">
+                            <div>
+                                {% if imageForm.vars.value.path is not null %}
+                                    <span class="avatar avatar-xl" style="background-image: url('{{ imageForm.vars.value.path|imagine_filter('sylius_small') }}')"></span>
+                                {% else %}
+                                    <span class="avatar avatar-xl"></span>
+                                {% endif %}
+                            </div>
+                            <div class="mt-3 d-flex items-center">
+                                {{ form_widget(imageForm.vars.button_delete, sylius_test_form_attribute('delete-image')|sylius_merge_recursive({attr: { class: 'btn btn-outline-danger w-100'}})) }}
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="mb-3">
+                                {{ form_row(imageForm.type, sylius_test_form_attribute('type')) }}
+                            </div>
+                            <div class="mb-3">
+                                {{ form_row(imageForm.file, sylius_test_form_attribute('file')) }}
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+
+            <div class="d-grid gap-2">
+                {{ form_widget(form.images.vars.button_add, sylius_test_form_attribute('add-image')|sylius_merge_recursive({attr: {class: 'btn btn-outline-primary '}})) }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/translations.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/translations.html.twig
similarity index 65%
rename from src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/translations.html.twig
rename to src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/translations.html.twig
index d6ef263f5fc..15887f9d048 100644
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/form/sections/translations.html.twig
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/form/translations.html.twig
@@ -3,12 +3,13 @@
 <div class="bg-white mb-3">
     {% set body %}
         {% verbatim %}
-            <div class="row"
-                data-controller="taxon-slug"
-                data-taxon-slug-url-value="{{ path('sylius_admin_ajax_generate_taxon_slug') }}"
-                data-taxon-slug-locale-value="{{ locale }}"
-                data-taxon-slug-taxon-parent-code-value="{{ translationForm.vars.data.translatable.code ?? null }}"
-            >
+            <div class="row"/>
+<!--            #todo implement this like in the product-->
+<!--                data-controller="taxon-slug"-->
+<!--                data-taxon-slug-url-value="{{ path('sylius_admin_ajax_generate_taxon_slug') }}"-->
+<!--                data-taxon-slug-locale-value="{{ locale }}"-->
+<!--                data-taxon-slug-taxon-parent-code-value="{{ translationForm.vars.data.translatable.code ?? null }}"-->
+<!--            >-->
                 <div class="col-12 col-md-6">
                     {{ form_row(translationForm.name, { attr: { 'data-taxon-slug-target': 'sluggable', 'data-action': 'change->taxon-slug#generateSlug' } }) }}
                 </div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/tree.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/tree.html.twig
new file mode 100644
index 00000000000..66b17ae21e6
--- /dev/null
+++ b/src/Sylius/Bundle/AdminBundle/templates/taxon/sections/tree.html.twig
@@ -0,0 +1,16 @@
+{# Rendered with \Sylius\Bundle\AdminBundle\Twig\Component\Taxon\TreeComponent #}
+
+{% import '@SyliusAdmin/taxon/helper/tree.html.twig' as taxonTree %}
+
+<div {{ attributes }}>
+    <div class="card mb-5" data-js-tree="container">
+        <div class="card-body relative">
+            <div class="mb-3">
+                <button data-js-tree="toggle-all" type="button" class="btn btn-sm">Toggle All</button>
+            </div>
+            <div>
+                {{ taxonTree.render(rootNodes) }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Sylius/Bundle/AdminBundle/templates/taxon/update/form.html.twig b/src/Sylius/Bundle/AdminBundle/templates/taxon/update/form.html.twig
deleted file mode 100644
index 3c598c1e031..00000000000
--- a/src/Sylius/Bundle/AdminBundle/templates/taxon/update/form.html.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends '@SyliusAdmin/shared/crud/update/content/form.html.twig' %}
-
-{% block form_content %}
-    <div class="row">
-        {{ form_errors(form) }}
-        {{ form_widget(form._token) }}
-
-        {{ parent() }}
-    </div>
-{% endblock %}