{% extends "TrinityAdminBundle::layout.html.twig" %}

{% import _self as macros %}

{% block menu %}
    {% render controller("TrinityAdminMenuBundle:Default:mainMenu") %}
{% endblock %}

{% block breadcrumb  %}
    {{ render_admin_breadcrumb() }}
{% endblock %}

{% macro nodes_tr(node, menu, current_nav) %}
    {% import _self as macros %}

    {% if node %}
        <tr class="node" id="tr_node_{{ node.id }}">
            {%  if (not(node.isAccessible) or not(node.isVisible)) %}
                <td class="cols_td muted" width="50%">
            {% else %}
                <td class="cols_td" width="50%">
            {% endif %}
                {% if node.level > 1 %}
                    {% spaceless %}
                        {% for i in 1..(node.level-1) %}
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {% endfor %}
                    {% endspaceless %}
                {% endif %}
                {{ node.title }}
            </td>

            <td class="cols_td node_url">
                <a href="{{ page_admin_url(node, node.cleanedDefaultParams, false, true) }}" target="_blank">
                    {{ text_url(node, node.cleanedDefaultParams)|raw }}
                </a>
            </td>

            <td class="actions_td" width="100">
                <div class="node_actions_list">
                    {% if menu and current_nav %}
                        {% if current_nav.getRootNode != node %}
                            {% if menu.nodes|length > 1 %}
                                <a class="node_action_drag" data-url="{{ path('TrinityContentManagerBundleNodeAdmin_move', { id: node.id }) }}" data-node="{{ node.title }}">
                                    <i title="{{ 'cms.node.action.move'|trans({}, 'TrinityContentManagerBundle') }}"  class="icon-resize-vertical"></i>
                                </a>
                            {% endif %}

                            <a class="node_action_add" data-url="{{ path('TrinityContentManagerBundleNodeAdmin_new', { id: node.id }) }}">
                                <i title="{{ 'cms.node.action.add'|trans({}, 'TrinityContentManagerBundle') }}" class="icon-plus-sign"></i>
                            </a>
                        {% endif %}
                    {% endif %}

                    <a class="node_action_edit" data-node="node-{{ node.id }}" data-url="{{ path('TrinityContentManagerBundleNodeAdmin_edit', { id: node.id }) }}">
                        <i title="{{ 'cms.node.action.edit'|trans({}, 'TrinityContentManagerBundle') }}" class="icon-edit"></i>
                    </a>

                    {% if not node.hasAliases and menu and current_nav %}
                        {% if current_nav.getRootNode != node and menu.nodes|length > 1 %}
                            <a class="node_action_remove" data-url="{{ path('TrinityContentManagerBundleNodeAdmin_remove', { id: node.id }) }}">
                                <i title="{{ 'cms.node.action.remove'|trans({}, 'TrinityContentManagerBundle') }}" class="icon-remove"></i>
                            </a>
                        {% endif %}
                    {% else %}
                        <a title="{{ 'cms.node.action.can_not_remove'|trans({}, 'TrinityContentManagerBundle') }}">
                            <i class="icon-grey icon-remove"></i>
                        </a>
                    {% endif %}

                    <span class="node_action_edit_page_container">
                        {% if node.page %}
                            <a class="node_action_edit_page" data-node="node-{{ node.id }}" href="{{ path('TrinityContentManagerBundlePageAdmin_edit', { id: node.page.id }) }}">
                                <i title="{{ 'cms.node.action.edit_page'|trans({}, 'TrinityContentManagerBundle') }}" class="icon-list-alt"></i>
                            </a>
                        {% else %}
                            <a>
                                <i title="{{ 'cms.node.action.can_not_edit'|trans({}, 'TrinityContentManagerBundle') }}" class="icon-grey icon-list-alt"></i>
                            </a>
                        {% endif %}
                    </span>
                </div>
            </td>
        </tr>
    {% endif %}
{% endmacro %}

{% block panel %}{% endblock %}

{% block body %}
    <div id="crud">
        {% if not current_nav %}
            <div class="alert alert-warning">
                {{ 'cms.node.error.unselected'|trans({}, 'TrinityContentManagerBundle') }}

                <hr />

                <div class="nav-select">
                    <select>
                        <option value=""></option>
                        {% for nav in navs %}
                            <option value="{{ path('TrinityContentManagerBundleNodeAdmin_index', { nav_id: nav.getId }) }}" {% if current_nav and nav.getId == current_nav.getId %}selected{% endif %}>
                                {{ nav.title }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% else %}
            <h3 class="crud-title">{{ current_nav.title }}</h3>

            <div class="sep"></div>

            <div class="row container-fluid">
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="cols_th">{{ 'Title'|trans() }}</th>
                            <th class="cols_th">{{ 'Url'|trans() }}</th>
                            <th class="actions_th"></th>
                        </tr>
                    </thead>
                    <tfoot></tfoot>
                    <tbody>
                        {{ macros.nodes_tr(current_nav.getRootNode, null, current_nav) }}
                    </tbody>
                </table>
            </div>

            {% for i, menu in menus %}
                <h4 class="crud-menu">{{ menu.menu.title }}</h4>

                <div class="row container-fluid">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                            <tr>
                                <th class="cols_th">{{ 'Title'|trans() }}</th>
                                <th class="cols_th">{{ 'Url'|trans() }}</th>
                                <th class="actions_th"></th>
                            </tr>
                        </thead>
                        <tfoot></tfoot>
                        <tbody>
                            {% for node in menu.nodes %}
                                {{ macros.nodes_tr(node, menu, current_nav) }}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        {% endif %}
    </div>

    <div class="loading">
        <h3><img src="{{ asset('bundles/trinityadmin/img/loading.gif') }}" title="{{ 'cms.loading'|trans({}, 'TrinityContentManagerBundle') }}" alt="{{ 'cms.loading'|trans({}, 'TrinityContentManagerBundle') }}" />{{ 'cms.loading'|trans({}, 'TrinityContentManagerBundle') }}</h3>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        var triggerAction = function(element, selector, redirect) {
            var $target = $(element);

            if (!$target.hasClass('node')) {
                $target = $target.parent();
            }

            if (!redirect) {
                return $target.find(selector).trigger('click');
            }

            var href =  $target.find(selector).attr('href');

            if (href) {
                document.location.href = href;
            }
        }

        {% if app.request.query.has('node') %}
            var $trNode = $("#tr_node_{{ app.request.query.get('node') }}");

            if ($trNode.length) {
                triggerAction($trNode, '.node_action_edit');
            }
        {% endif %}

        $('tr.node').each(function() {
            var menu = {};

            if ($(this).find('.node_action_drag').length) {
                menu.drag = {
                    name: '{{ 'cms.node.action.move_context_menu'|trans({}, 'TrinityContentManagerBundle') }}',
                    icon: "drag",
                    callback: function() {
                        triggerAction($(this), '.node_action_drag');
                    }
                };
            }

            if ($(this).find('.node_action_add').length) {
                menu.add = {
                    name: '{{ 'cms.node.action.add_context_menu'|trans({}, 'TrinityContentManagerBundle') }}',
                    icon: "add",
                    callback: function() {
                        triggerAction($(this), '.node_action_add');
                    }
                };
            }

            if ($(this).find('.node_action_edit').length) {
                menu.edit = {
                    name: '{{ 'cms.node.action.edit_context_menu'|trans({}, 'TrinityContentManagerBundle') }}',
                    icon: "edit",
                    callback: function() {
                        triggerAction($(this), '.node_action_edit');
                    }
                };
            }

            if ($(this).find('.node_action_remove').length) {
                menu.remove = {
                    name: '{{ 'cms.node.action.remove_context_menu'|trans({}, 'TrinityContentManagerBundle') }}',
                    icon: "remove",
                    callback: function() {
                        triggerAction($(this), '.node_action_remove');
                    }
                };
            }

            if ($(this).find('.node_action_edit_page').length) {
                menu.edit_page = {
                    name: '{{ 'cms.node.action.edit_page_context_menu'|trans({}, 'TrinityContentManagerBundle') }}',
                    icon: "edit-page",
                    callback: function() {    
                        triggerAction($(this), '.node_action_edit_page', true);
                    }
                };
            }

            if (false === $.isEmptyObject(menu)) {
                $(this).contextMenu({
                    selector: 'td',
                    items: menu
                });
            }
        });
    </script>
{% endblock %}