{% spaceless %}
{% import 'PimUIBundle:Default:page_elements.html.twig' as elements %}

{% set parentId = form.vars.value.parent ? form.vars.value.parent.id : null %}

{% set entityName = parentId ? 'category' : 'tree' %}

{% if form.vars.value.id %}
    {% set title = (entityName ~ '.edit')|trans ~ ' - ' ~ form.vars.value.label %}
{% else %}
    {% set title = (entityName ~ '.create')|trans %}
{% endif %}
{% endspaceless %}


{{ form_start(form, {
    'action': form.vars.value.id ?
        path(route ~ '_categorytree_edit', { id: form.vars.value.id }) :
        path(route ~ '_categorytree_create', { parent: parentId }),
    'attr': {
        'data-updated-title': 'confirmation.leave'|trans,
        'data-updated-message': 'confirmation.discard changes'|trans({ '%entity%': (entityName ~ '.title')|trans })
    }
}) }}

    {% set buttons %}
        {% if form.vars.value.id %}
            <div class="AknSecondaryActions AknDropdown AknButtonList-item secondary-actions">
              <div class="AknSecondaryActions-button dropdown-button" data-toggle="dropdown"></div>
              <div class="AknDropdown-menu AknDropdown-menu--right">
                  <div class="AknDropdown-menuTitle">{{'other_actions'|trans}}</div>
                   
                    
                      {# {% if exceeds_products_limit_for_removal(form.vars.value, true, related_entity) %}
                          {{ elements.link(
                              'btn.delete',
                              null,
                              {
                                  'icon':  'trash',
                                  'title': 'btn.delete',
                                  'class': 'AknDropdown-menuLink delete',
                                  'attr': {
                                      'data-title':   'confirmation.delete'|trans,
                                      'data-dialog':  'alert',
                                      'data-message': 'info.category.products limit exceeded'|trans({ '%limit%': get_products_limit_for_removal()|default('0') })
                                  }
                              }
                          ) }}
                      {% else %} #}
                          {{ elements.deleteLink(
                              path(route ~ '_categorytree_remove', { id: form.vars.value.id }),
                              'pim_enrich_product_category_remove',
                              form.vars.value.parent ? path(route ~ '_categorytree_edit', { id: form.vars.value.parent.id }) : path(route ~ '_categorytree_create'),
                              'confirmation.remove.category'|trans({ '%name%': form.vars.value.label }) ~ ' '
                                  ~ 'info.category.remove children'|trans ~ ' '
                                  ~ 'info.category.keep products'|trans,
                              (form.vars.value.parent ? 'flash.category.removed' : 'flash.tree.removed')|trans,
                              '',
                              'AknDropdown-menuLink delete'
                          ) }}
                      {# {% endif %} #}
                  </div>
            </div>
        {% endif %}
        {{ elements.submitBtn('', 'ok', 'AknButtonList-item') }}
    {% endset %}

    {{ elements.page_header(
        {
            title: title,
            buttons: buttons,
            state: elements.updated(form.vars.id)
        }
    ) }}

    {# This style is temporary and will be dropped on PEFization of this screen #}
    <div id="category-tree-container" style="display:flex; height:100%">
        <div class="ui-resizable-container">
          <div id="tree" {% if form.vars.value.id %} data-node-id="{{ form.vars.value.id }}"{% elseif form.vars.value.parent %} data-node-id="{{ form.vars.value.parent.id }}"{% endif %} data-editable="true"data-creatable="true"></div>
        </div>
        <div class="AknTabContainer" style="flex-grow:1; padding: 0 0 0 20px;">
            {{ elements.form_navbar(view_element_aliases(form.vars.id ~ '.form_tab')) }}
            <div class="AknTabContainer-content tab-content">
                {{ elements.form_errors(form) }}
                {{ view_elements(form.vars.id ~ '.form_tab') }}
            </div>
        </div>
    </div>

{{ form_end(form) }}

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

    require(['pim/menu/resizable'], function(Resizable) {
        $(function() {
            Resizable.set({
                minWidth: 300,
                maxWidth: 500,
                container: '.ui-resizable-container',
                storageKey: 'category-tree-edit'
            })
        });
    });
</script>
