{% extends 'OroUIBundle:actions:index.html.twig' %}
{% import 'OroUIBundle::macros.html.twig' as UI %}
{% set pageTitle = 'oro.cms.page.entity_plural_label'|trans %}

{% block navButtons %}
    {% if resource_granted('oro_cms_page_create') %}
        <div class="btn-group">
            {{ UI.addButton({
                'path': path('oro_cms_page_create'),
                'entity_label': 'oro.cms.page.entity_label'|trans
            }) }}
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    {{ parent() }}

    <div class="left-panel-container">
        <div class="placeholder">
            <div class="scrollable-container">
                <div class="left-panel scrollable-container">
                    <div class="page">
                        {% set treeOptions = {
                            'key' : 'commerce-page',
                            'data' : oro_page_list(),
                            'updateAllowed' : resource_granted('oro_cms_page_update'),
                            'onSelectRoute' : 'oro_cms_page_view',
                            'onMoveRoute' : 'oro_cms_page_move'
                        } %}
                        <div
                            data-page-component-module="orocms/js/app/components/tree-manage-component"
                            data-page-component-options="{{ treeOptions|json_encode }}"
                        ></div>
                    </div>
                </div>
                <div class="content">
                    {% if resource_granted('oro_cms_page_create') and resource_granted('oro_cms_page_update') %}
                        <div class="text-center">
                            {{ 'oro.cms.template.select_existing_or_create_new'|trans }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}