{% extends 'OroUIBundle:actions:update.html.twig' %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% set entityId = entity.id %}
{% set parentPageId = entity.parentPage ? entity.parentPage.id : null %}

{% oro_title_set({params : {"%title%": entity.title, '%entityName%': 'oro.cms.page.entity_label'|trans} }) %}

{% set formAction = entityId ? path('oro_cms_page_update', { 'id': entityId }) : path('oro_cms_page_create', { 'id': parentPageId })  %}

{% block navButtons %}
    {% if entityId %}
        {% if resource_granted('oro_cms_page_create') %}
            {{ UI.button({
                'path' : path('oro_cms_page_create', { 'id': entityId }),
                'iCss': 'icon-book',
                'aCss': 'btn-primary',
                'label': 'oro.ui.create_entity'|trans({'%entityName%': 'oro.cms.child_page.entity_label'|trans}),
                'title': 'oro.ui.create_entity'|trans({'%entityName%': 'oro.cms.child_page.entity_label'|trans})
            }) }}
        {% endif %}
    {% endif %}

    {{ parent() }}

    {{ UI.cancelButton(path('oro_cms_page_index')) }}
    {% set html = UI.saveAndCloseButton() %}
    {% if entityId or resource_granted('oro_cms_page_update') %}
        {% set html = html ~ UI.saveAndStayButton() %}
    {% endif %}
    {{ UI.dropdownSaveButton({'html': html}) }}
{% endblock navButtons %}

{% block pageHeader %}
    {% if entityId %}
        {% set breadcrumbs = {
            'entity':      entity,
            'indexPath':   path('oro_cms_page_index'),
            'indexLabel': 'oro.cms.page.entity_plural_label'|trans,
            'entityTitle': entity.title|default('N/A'|trans)
        } %}
        {{ parent() }}
    {% else %}
        {% set title = 'oro.ui.create_entity'|trans({'%entityName%': 'oro.cms.page.entity_label'|trans}) %}
        {% include 'OroUIBundle::page_title_block.html.twig' with { title: title } %}
    {% endif %}
{% endblock pageHeader %}

{% block content_data %}
    {% set id = 'page-edit' %}

    {% set pageContent %}
        <div class="page-content-editor">
            {{ form_widget(form.content) }}
        </div>
    {% endset %}

    {% set dataBlocks = [
        {
            'title': 'oro.cms.sections.general'|trans,
            'class': 'active',
            'subblocks': [{
                'title': '',
                'data': [
                    form_row(form.parentPage),
                    form_row(form.title),
                    form_row(form.slug)
                ]
            }]
        },
        {
            'title': 'oro.cms.sections.content'|trans,
            'subblocks': [{
                'title': '',
                'data': [pageContent]
            }]
        }
    ] %}

    {% set data = {
        'formErrors': form_errors(form),
        'dataBlocks': dataBlocks
    }%}

    <div class="cms-page-container tree-component-container">
        <div class="page page-tree tree-component">
            {% set treeOptions = {
                'key' : 'commerce-page',
                'data' : oro_page_list(),
                'nodeId' : entity.id,
                'updateAllowed' : resource_granted('oro_cms_page_update'),
                'onSelectRoute' : 'oro_cms_page_view',
                'onMoveRoute' : 'oro_cms_page_move',
                'reloadWidget': 'page-info-widget'
            } %}
            <div
                data-page-component-module="orocms/js/app/components/tree-manage-component"
                data-page-component-options="{{ treeOptions|json_encode }}"
            ></div>
        </div>
    </div>
    <div class="cms-page-data">
        {{ parent() }}
        {% set options = {
            'targetInput': '#' ~ form.title.vars.id,
            'recipientInput': '#' ~ form.slug.slug.vars.id,
            'modeName': 'oro_cms_page[slug][mode]'
        } %}
        <div
            data-page-component-module="orocms/js/app/components/slugify-component"
            data-page-component-options="{{ options|json_encode }}"
        ></div>
    </div>
{% endblock content_data %}