{% extends bap.layout %}
{% import '@OroUI/macros.html.twig' as UI %}
{% oro_title_set({params : {"%name%": dashboard.getLabel() }}) %}
{% block breadcrumb %}
    {% set breadcrumbs = [
        {'label': 'oro.dashboard.menu.dashboards_tab.label'|trans },
        {'label': dashboard.getLabel()|trans }
    ] %}
    {% include '@OroNavigation/Menu/breadcrumbs.html.twig' %}
{% endblock breadcrumb %}
{% block content %}
{% set widgetIdPrefix = 'dashboard-widget-' ~ random() ~ '-' %}
{% set allowEdit = is_granted('EDIT', dashboard.entity) %}

{% set availableWidgets = [] %}
{% for widgetName, widget in widgets %}
    {% if widget.acl is not defined or is_granted(widget.acl) %}
        {% set icon = asset(widget.icon|default("bundles/orodashboard/img/no_icon.png")) %}
        {% set title = widget.label|trans %}
        {% set description = '' %}
        {% if widget.description is defined %}
            {% set description = widget.description|trans %}
        {% endif %}
        {% set availableWidgets = availableWidgets|merge([{
            'dialogIcon': icon,
            'iconClass': widget.icon_class|default(null),
            'title': title,
            'widgetName': widgetName,
            'description': description,
            'isNew': widget.isNew,
            'configurationDialogOptions':  widget.configuration_dialog_options
        }]) %}
    {% endif %}
{% endfor %}

{% set widgetIds = [] %}
{% for widget in dashboard.widgets %}
    {% if widget.config.acl is not defined or is_granted(widget.config.acl) %}
        {% set widgetIds = widgetIds|merge([widgetIdPrefix ~ widget.id]) %}
    {% endif %}
{% endfor %}

{% set dashboardContainerOptions = {
    widgetIds: widgetIds,
    dashboardId: dashboard.id,
    columnsSelector: '.dashboard-column',
    allowEdit: allowEdit ? 'true' : 'false',
    availableWidgets: availableWidgets
} %}

{% import '@OroUI/macros.html.twig' as UI %}

<div class="layout-content dashboard-container-wrapper" {{ UI.renderPageComponentAttributes({
    view: 'orodashboard/js/app/views/dashboard-container-view',
    options: dashboardContainerOptions
}) }}>
    <div class="container-fluid page-title">
        <div class="navigation navbar-extra navbar-extra-right">
            <div class="row">
                {% block title %}
                <div class="pull-left pull-left-extra">
                    <div class="pull-left">
                        <h1 class="oro-subtitle">
                            {{ dashboard.getLabel()|trans }}
                        </h1>
                    </div>
                </div>
                {% endblock title %}

                {% block navButtons %}
                    {% import '@OroUI/macros.html.twig' as UI %}

                    {% if dashboards|length > 1 %}
                        <div class="dashboard-selector-container pull-right">
                            <label for="dashboard_selector">{{ 'oro.dashboard.entity_plural_label'|trans }}:</label>
                            <select id="dashboard_selector" {{ UI.renderPageComponentAttributes({
                                view: 'orodashboard/js/app/views/dashboard-change-view'
                            }) }}>
                                {% for dashboardModel in dashboards %}
                                    <option value="{{ dashboardModel.id }}"{% if dashboardModel.id == dashboard.id %} selected="selected"{% endif %}>
                                        {% set translatedLabel = dashboardModel.getLabel()|trans %}
                                        {{ translatedLabel|length <= 50 ? translatedLabel : translatedLabel|slice(0, 50)|trim(side='right') ~ '...' }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}
                {% endblock navButtons %}

                {% block titleNavButtons %}

                    {% placeholder dashboard_navButtons_before %}

                    <div class="pull-right title-buttons-container">
                        {% if allowEdit %}
                            <a href="#" class="dashboard-widgets-add btn main-group">
                                <span class="fa-plus"></span>
                                {{- 'oro.dashboard.add_dashboard_widgets.add_widget'|trans|trim -}}
                            </a>
                        {% endif %}

                        {% set html %}
                            {% if is_granted('EDIT', dashboard.entity) and feature_resource_enabled('Oro\\Bundle\\DashboardBundle\\Entity\\Dashboard', 'entities') %}
                                {{ UI.dropdownItem({
                                    'path': path('oro_dashboard_update', {id:dashboard.id}),
                                    'title': 'oro.dashboard.edit_dashboard_link.title'|trans,
                                    'label': 'oro.dashboard.edit_dashboard_link.text'|trans,
                                    'aCss': 'dropdown-item',
                                    'iCss': 'fa-pencil-square-o'
                                }) }}
                            {% endif %}
                            {% if is_granted('oro_dashboard_create') and feature_resource_enabled('Oro\\Bundle\\DashboardBundle\\Entity\\Dashboard', 'entities') %}
                                {{ UI.dropdownItem({
                                    'path': path('oro_dashboard_create'),
                                    'title': 'oro.dashboard.create_dashboard_link.title'|trans,
                                    'label': 'oro.dashboard.create_dashboard_link.text'|trans,
                                    'aCss': 'dropdown-item',
                                    'iCss': 'fa-plus'
                                }) }}
                            {% endif %}
                            {% if is_granted('DELETE', dashboard.entity) and feature_resource_enabled('Oro\\Bundle\\DashboardBundle\\Entity\\Dashboard', 'entities') %}
                                <li>
                                    {{ UI.deleteLink({
                                        'dataUrl': path('oro_api_delete_dashboard', {id:dashboard.id}),
                                        'dataRedirect': path('oro_dashboard_index'),
                                        'aCss': 'no-hash remove-button dropdown-item',
                                        'id': 'btn-remove-user',
                                        'dataId': dashboard.id,
                                        'entity_label': 'oro.dashboard.entity_label'|trans
                                    }) }}
                                </li>
                            {% endif %}
                        {% endset %}

                        {% if html|trim is not empty %}
                            {{ UI.dropdownButton({
                                'label': 'oro.dashboard.tools_dropdown.label'|trans,
                                'iCss': 'fa-cog',
                                'aCss': 'pull-right',
                                'html': html
                            }) }}
                        {% endif %}
                    </div>

                    {% placeholder dashboard_navButtons_after %}

                {% endblock titleNavButtons %}
            </div>
        </div>
    </div>
    {% block widgets_content %}
        {% set contentClass = contentClass|default('dashboard-container') %}
        <div class="scrollable-container">
            <div class="responsive-section {{ contentClass }}">
                <div class="clearfix">
                {% block widgets %}
                    {% import _self as dashboardMacros %}
                    {{
                        dashboardMacros.renderWidgetsColumn({
                            'widgets': dashboard.getOrderedColumnWidgets(0, false, true),
                            'columnElementId': 'dashboard-column-0',
                            'columnClass': 'dashboard-column',
                            'widgetIdPrefix': widgetIdPrefix,
                            'allowEdit': allowEdit
                        })
                    }}
                    {{
                        dashboardMacros.renderWidgetsColumn({
                            'widgets': dashboard.getOrderedColumnWidgets(1, true, false),
                            'columnElementId': 'dashboard-column-1',
                            'columnClass': 'dashboard-column',
                            'widgetIdPrefix': widgetIdPrefix,
                            'allowEdit': allowEdit
                        })
                    }}
                {% endblock widgets %}
                </div>
            </div>
        </div>
    {% endblock widgets_content %}
</div>
{% endblock content %}

{% macro renderWidgetsColumn(options) %}
    <div id="{{ options.columnElementId }}" class="responsive-cell dashboard-column">
        {% for widget in options.widgets %}
            {% if widget.config.acl is not defined or is_granted(widget.config.acl) %}
                {{
                    oro_widget_render({
                        'widgetType': 'dashboard-item',
                        'wid': options.widgetIdPrefix ~ widget.id,
                        'url': path(widget.config.route, widget.config.route_parameters|merge({'_widgetId': widget.id})),
                        'state': {
                            'id': widget.id,
                            'expanded': widget.expanded,
                            'layoutPosition': widget.layoutPosition,
                        },
                        'allowEdit': options.allowEdit,
                        'showConfig': options.allowEdit and widget.config.configuration|length > 0,
                        'widgetName': widget.entity.name,
                        'configurationDialogOptions': widget.config.configuration_dialog_options
                    })
                }}
            {% endif %}
        {% endfor %}
        <div class="empty-text{% if options.widgets|length > 0 %} hidden-empty-text{% endif %}">
            <div class="widget-placeholder">
                {% if options.allowEdit %}
                    {{ 'oro.dashboard.empty_column_message.allowed'|trans|raw }}
                {% else %}
                    {{ 'oro.dashboard.empty_column_message.denied'|trans }}
                {% endif %}
            </div>
        </div>
    </div>
{% endmacro %}