{% extends "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets debug=false filter='cssmin'  output='vendor/innovapath/editor.css'
        '@InnovaPathBundle/Resources/public/css/Editor/*'
        '@InnovaPathBundle/Resources/public/css/tree-view.css'
        '@InnovaPathBundle/Resources/public/css/colors.css'
        '@InnovaAngularUIPageslideBundle/Resources/public/css/*'
        '@InnovaAngularUITreeBundle/Resources/public/css/*'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block breadcrumb %}
    {{
        macros.breadcrumbs([
            {
                'icon': 'fa fa-book',
                'name': 'workspaces'|trans({}, 'platform'),
                'href': path('claro_workspace_list')
            },
            {
                'name': workspace.name ~ ' - ' ~ workspace.code,
                'href': path('claro_workspace_open', {'workspaceId': workspace.id, 'toolName': 'home'})
            },
            {
                'name': 'innova_path'|trans({}, 'tools'),
                'href': path('claro_workspace_open_tool', {workspaceId: workspace.id, toolName: 'innova_path'})
            },
            {
                'name': 'editor'|trans({}, 'path_editor'),
                'href': ''
            }
        ])
    }}
{% endblock %}

{% block content %}
    {{ form_start(form, {'attr': {'class': 'form-horizontal', 'novalidate': true}}) }}
        <div data-ng-cloak="" data-ng-app="EditorApp" class="path-editor">
            <div data-ng-controller="AlertCtrl" class="alerts">
                {% include 'InnovaPathBundle:Editor:messages.html.twig' %}
            </div>

            <div data-ng-controller="MainCtrl">
                <div data-ng-controller="TemplateCtrl" id="templates-sidebar" style="display:none;" >
                    {% include 'InnovaPathBundle:Editor:Template/sidebar.html.twig' %}
                </div>

                {% include 'InnovaPathBundle:Editor:actions-bar.html.twig' with { workspace: workspace } %}

                <div data-ng-controller="GlobalCtrl" class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        {% include 'InnovaPathBundle:Editor:Path/global.html.twig' %}
                    </div>
                </div>

                <div class="row">
                    <div data-ng-controller="ScenarioCtrl" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        {% include 'InnovaPathBundle:Editor:Path/scenario.html.twig' %}
                    </div>

                    <div data-ng-controller="StepCtrl" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        {% include 'InnovaPathBundle:Editor:Step/edit.html.twig' %}
                    </div>
                </div>
            </div>
        </div>
    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {# Load Claroline JS #}
    {{ parent() }}
    
    {# Load translations #}
    <script type="text/javascript" src="{{ url('bazinga_exposetranslation_js', { 'domain_name': 'path_editor' }) }}"></script>
    {# Angular #}
    {% javascripts debug=false filter='jsmin' output='vendor/angular/angular-js.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-route.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-animate.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-cookies.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-loader.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-mocks.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-resource.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-sanitize.min.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-scenario.js'
        '@InnovaAngularJSBundle/Resources/public/js/angular-touch.min.js'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {# Angular UI #}
    {% javascripts debug=false filter='jsmin' output='vendor/angular/angular-ui.js'
        '@InnovaAngularUIBootstrapBundle/Resources/public/js/*'
        '@InnovaAngularUITreeBundle/Resources/public/js/*'
        '@InnovaAngularUIPageslideBundle/Resources/public/js/*'
        '@InnovaAngularUITinyMCEBundle/Resources/public/js/*'
        '@InnovaAngularUITranslationBundle/Resources/public/js/*'
        '@InnovaAngularUIResourcePickerBundle/Resources/public/js/*'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts debug=false filter='jsmin' output='vendor/innovapath/editor.js'
        '@InnovaPathBundle/Resources/public/angularjs/Alert/Factory/AlertFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Alert/Controller/AlertCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/History/Factory/HistoryFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Clipboard/Factory/ClipboardFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Path/Factory/PathFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Path/Filter/PathToJsonFilter.js'
        '@InnovaPathBundle/Resources/public/angularjs/Editor/Controller/MainCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Editor/Controller/GlobalCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Editor/Controller/ScenarioCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Step/Controller/StepCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Editor/Controller/ConfirmExitModalCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Step/Factory/StepFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Confirm/Controller/ConfirmModalCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Resource/Factory/ResourceFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Template/Factory/TemplateFactory.js'
        '@InnovaPathBundle/Resources/public/angularjs/Template/Controller/TemplateCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/Template/Controller/TemplateModalCtrl.js'
        '@InnovaPathBundle/Resources/public/angularjs/TruncateText/Filter/TruncateTextFilter.js'
        '@InnovaPathBundle/Resources/public/angularjs/Editor/EditorApp.js'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {# Set some vars needed by Angular parts #}
    <script type="text/javascript">
        EditorApp.workspaceId   = {{ workspace.id }};
        EditorApp.formName      = "{{ form.vars.name }}";
        EditorApp.currentPath   = {{ form.vars.value.structure | raw }};
        EditorApp.appDir        = "{{ app.request.getBaseUrl }}";
        EditorApp.webDir        = "{{ asset('') }}";
        EditorApp.wsDirectoryId = {{ wsDirectoryId }};
        EditorApp.locale        = "{{ app.request.locale ~ '_' ~ app.request.locale|upper }}";

        EditorApp.resourceIcons = {
            {% for resourceIcon in resourceIcons %}
                "{{ resourceIcon.mimeType }}" : "{{ asset(resourceIcon.relativeUrl) }}"{% if loop.last != true %},{% endif %}
            {% endfor %}
        };

        EditorApp.resourceTypes = {
            {% for resourceType in resourceTypes %}
            "{{ resourceType.getName() }}": {
                "name": "{{ resourceType.getName()|trans({}, 'resource') }}",
                "actions": {
                    {% for action in resourceType.getActions() %}
                    "{{ action.getName() }}": {
                        "name":     "{{ action.getName() }}",
                        "route":    "{{ path('claro_resource_action', {'resourceType': resourceType.getName(), 'action': action.getName(), 'node': '_nodeId' }) }}",
                        "async":    {% if action.isAsync() %} 1 {% else %} 0 {% endif %},
                        "mask":     {{ action.getValue() }},
                        "isCustom": {% if action.isCustom() %} "yes" {% else %} "no" {% endif %},
                        "isForm":   {% if action.isForm() %} true {% else %} false {% endif %}
                    }
                    {% if loop.last != true %},{% endif %}
                    {% endfor %}
                }
            }{% if loop.last != true %},{% endif %}
            {% endfor %}
        };
    </script>
{% endblock %}