{% import '@PimUI/Default/page_elements.html.twig' as elements %}

{% block content %}
<div class="AknDefault-mainContent">
    {% set title = ('category.overview')|trans %}
    {{ elements.page_header({ title: title }) }}

    <div id="category-tree-container" style="display:flex; height:100%">
        <div class="ui-resizable-container">
            <div id="tree"  data-editable="true" data-creatable="true"></div>
        </div>

        <div id="category-form" style="flex-grow:1" class="AknDefault-mainContent">
            <div class="AknInfoBlock">
                
                    {{ 'category.suggest selection'|trans }}
                
                
                    <br/>
                    {{ 'category.or'|trans }}
                    <br/>
                    <a class="AknButton AknButton--apply" href="#{{ path(route ~ '_categorytree_create', { parent: 0 }) }}">
                        {{ 'category.create new'|trans }}
                    </a>
                
            </div>
        </div>
    </div>

    {% include "@WebkulDamCategory/_scripts.html.twig" %}    
</div>
{% endblock %}

<script nonce="{{ js_wk_nonce() }}" type="text/javascript">
    window.flashMessages = JSON.parse('{{ app.session.flashbag.all|json_encode()|raw }}');

    require(
        [
            'pim/common/breadcrumbs',
            'pim/fetcher-registry',
            'pim/form-builder',
            'pim/menu/resizable'
        ],
        function(
            Breadcrumbs,
            FetcherRegistry,
            FormBuilder,
            Resizable
        ) {
            $(function() {
                var breadcrumbs = new Breadcrumbs({
                    config: {
                        tab: 'pim-menu-settings',
                        item: 'pim-menu-settings-asset-category'
                    }
                });
                breadcrumbs.configure().then(function () {
                    breadcrumbs.render();
                    $('*[data-drop-zone="breadcrumbs"]').append(breadcrumbs.$el);
                });

                FetcherRegistry.initialize().done(function () {
                    FormBuilder.build('pim-menu-user-navigation').then(function (form) {
                        $('.user-menu').append(form.el);
                        form.render();
                    }.bind(this));
                });

                Resizable.set({
                    minWidth: 300,
                    maxWidth: 500,
                    container: '.ui-resizable-container',
                    storageKey: 'category-tree-edit'
                });
            });
        }
    );
</script>
