{% extends 'IcapWebsiteBundle::edit_layout.html.twig' %}
{% import 'IcapWebsiteBundle:Website:Macros/common_macros.html.twig' as commonMacros %}

{% set optionTabs = {'structure':'fa-sitemap', 'general':'fa-th-large', 'menu':'fa-list', 'banner':'fa-angle-up', 'footer':'fa-angle-down'} %}
{% block content %}
    <div class="website-container">
        <div class="website-body" data-ng-controller="MainController as vm">
            <div class="panel admin-bar">
                <ul class="nav nav-tabs admin-tab-options" role="tablist">
                    {% for option, icon in optionTabs %}
                        <li class="{{ option }}-options" ng-class="{'active':optionWindow=='{{ option }}'}"><a href="#/{{ option }}"><span class="icon-bg"></span><span class="option-text"><i class="fa {{ icon }}"></i> <span class="visible-md-inline visible-lg-inline">{{ option|trans({}, 'icap_website') }}</span></span></a></li>
                    {% endfor %}
                    <li class="pull-right"><a target="_blank" class="btn btn-default view-website-btn" href="{{ path('icap_website_force_view', {'websiteId': _resource.id}) }}"><i class="fa fa-eye"></i> <span class="visible-md-inline visible-lg-inline"> {{ 'view_website'|trans({}, 'icap_website') }}</span></a></li>
                    <li class="pull-right" data-ng-hide="optionWindow=='structure'"><button class="btn btn-primary save-options-btn" data-ng-click="vm.options.saveOptions()"><i class="fa fa-floppy-o"></i> <span class="visible-md-inline visible-lg-inline"> {{ 'save_all_options'|trans({}, 'icap_website') }}</span></button></li>
                </ul>
                <div class="admin-tabs">
                    {% include 'IcapWebsiteBundle:Website:Edit/general_options.html.twig' %}
                    {% include 'IcapWebsiteBundle:Website:Edit/menu_options.html.twig' %}
                    {% include 'IcapWebsiteBundle:Website:Edit/banner_footer_options.html.twig' with {'tag':'banner'} %}
                    {% include 'IcapWebsiteBundle:Website:Edit/banner_footer_options.html.twig' with {'tag':'footer'} %}
                    {% include 'IcapWebsiteBundle:Website:Edit/structure.html.twig' with {'pageTypes': pageTypes} %}
                </div>
            </div>
            <div class="website-preview" data-ng-show="optionWindow!='structure'" data-ng-style="vm.websitePreviewStyle()">
                <div class="website-preview-inner" data-ng-style="vm.websitePreviewInnerStyle()">
                    <div class="banner resizeable-bottom" ng-style="vm.bannerStyle()" data-ng-show="vm.options.bannerEnabled">
                        <div data-ng-show="!vm.options.bannerEditorActive" data-ng-bind-html="vm.options.deliberatelyTrustSnippet('bannerText')"></div>
                        <div data-ng-show="vm.options.bannerEditorActive" data-ng-style="{'height':vm.options.bannerHeight+'px'}"><textarea id="banner-text" data-ng-style="{'height':vm.options.footerHeight}" class="form-control" ui-tinymce="vm.tinymceConfig" data-ng-model="vm.options.bannerText"></textarea></div>
                    </div>
                    <div class="horizontal-resizer" resizer-bottom resizer="vm.options.bannerHeight" resizer-max="200" resizer-min="0" data-ng-show="vm.options.bannerEnabled">
                        <div class="resizer-box-left"></div>
                        <div class="resizer-box-center"></div>
                        <div class="resizer-box-right"></div>
                    </div>
                    <div class="website-container">

                        <div class="horizontal-menu" ng-show="vm.options.menuOrientation=='horizontal'" ng-style="vm.menuHorizontalStyle()">
                            <ui-flexnav menu="vm.menu.root" nav-style="vm.options" options="vm.flexnavOptions"></ui-flexnav>
                        </div>
                        <div class="container-content" ng-style="{height: vm.contentHeight}">
                            <div class="vertical-menu resizeable-right float-left" ng-show="vm.options.menuOrientation=='vertical'" ng-style="vm.menuVerticalStyle()">
                                <wxy-push-menu menu="vm.menu.root" menu-style="vm.options" options="vm.pushMenuOptions" menu-width="vm.options.menuWidth"></wxy-push-menu>
                            </div>
                            <div class="vertical-resizer float-left" ng-show="vm.options.menuOrientation=='vertical'" data-ng-mousedown="vm.optionWindow='menu'" resizer-right resizer="vm.options.menuWidth" data-ng-style="vm.menuResizerStyle()" resizer-max="200" resizer-min="50">
                                <div class="resizer-box-top"></div>
                                <div class="resizer-box-middle"></div>
                                <div class="resizer-box-bottom"></div>
                            </div>
                            <div class="content" change-height="vm.contentHeight" style="min-height: 200px;" ng-style="{'margin-left':((vm.options.menuOrientation=='vertical')?(vm.options.menuWidth+15):0)+'px'}">
                                <div>
                                    <div data-ng-if="vm.currentClickedItem.type=='{{ pageTypes.blank }}'" ng-bind-html="vm.currentClickedItem.trustedContent()"></div>
                                    <iframe width="100%" iframe-height-on-load data-ng-if="vm.currentClickedItem.type=='{{ pageTypes.url }}'" data-ng-src="{{ '{{ vm.currentClickedItem.getTrustedUrl() }}' }}"></iframe>
                                    <iframe width="100%" iframe-height-on-load data-ng-if="vm.currentClickedItem.type=='{{ pageTypes.resource }}'" data-ng-src="{{ '{{ vm.currentClickedItem.generateResourceUrl() }}' }}"></iframe>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>

                    <div class="footer resizeable-bottom" data-ng-style="vm.footerStyle()" data-ng-show="vm.options.footerEnabled">
                        <div data-ng-show="!vm.options.footerEditorActive" data-ng-bind-html="vm.options.deliberatelyTrustSnippet('footerText')"></div>
                        <div data-ng-show="vm.options.footerEditorActive" data-ng-style="{'height':vm.options.footerHeight+'px'}"><textarea id="footer-text" ng-style="{'height':vm.options.footerHeight}" class="form-control" ui-tinymce="vm.tinymceConfig" data-ng-model="vm.options.footerText"></textarea></div>
                        <div class="copyright-text" data-ng-if="vm.options.copyrightEnabled&&!vm.options.footerEditorActive" data-ng-style="{'color':vm.options.menuFontColor}">© Copyright {{ '{{ vm.options.copyrightText }}' }}</div>
                    </div>
                    <div class="horizontal-resizer" resizer-bottom resizer="vm.options.footerHeight" resizer-max="200" resizer-min="0" data-ng-show="vm.options.footerEnabled">
                        <div class="resizer-box-left"></div>
                        <div class="resizer-box-center"></div>
                        <div class="resizer-box-right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/icapwebsite/css/angular/bootstrap-additions.min.css') }}" screen="media" />
    <link rel="stylesheet" href="{{ asset('bundles/icapwebsite/css/angular/angular-ui-tree.min.css') }}" screen="media" />
    <link rel="stylesheet" href="{{ asset('bundles/icapwebsite/css/angular/angular-motion.min.css') }}" screen="media" />
    {% stylesheets debug=false filter='lessphp, cssmin' output='bundles/icapwebsite/css/style-edit.css'
    "@IcapWebsiteBundle/Resources/views/less/edit.less"
    %}
    <link rel="stylesheet" href="{{ asset_url }}" screen="media" />
    {% endstylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/icapwebsite/css/angular/pushmenu.css') }}" screen="media" />
    <link rel="stylesheet" href="{{ asset('bundles/icapwebsite/css/angular/flexnav.css') }}" screen="media" />

{% endblock %}

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

    {{ commonMacros.angularScripts() }}

    <script type="text/javascript">
        (function() {
            'use strict';

            var websiteData = {
                'id': {{ _resource.id }},
                'options': {{ _resource.options|serialize('json', serialization_context().setSerializeNull(true))|raw }},
                'basePath': "{{ app.request.basePath }}",
                'path': "{{ path('icap_website_view',{'websiteId': _resource.id}) }}",
                'optionTabs': [{% for option, icon in optionTabs  %} "{{ option }}"{% if not loop.last %},{% endif %} {% endfor %}],
                'pages': {{ _resource.pages|serialize('json', serialization_context().setSerializeNull(true))|raw }},
                'resourceTypes': {
                    {% for resourceType in resourceTypes %}
                    "{{ resourceType.getName() }}": {
                        "name": "{{ resourceType.getName()|trans({}, 'resource') }}"
                    }{% if loop.last != true %},{% endif %}
                    {% endfor %}
                }
            };

            console.log(websiteData);

            angular
                    .module('website.constants', [])
                    .constant('website.data', websiteData);
        })();
    </script>

    {#
        Import httpInterceptor module
    #}
    {% javascripts debug=false output='js/website/app/blocks/httpInterceptor.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/httpInterceptor/httpInterceptor.module.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/httpInterceptor/requestHandler.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/httpInterceptor/httpInterceptor.config.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/httpInterceptor/httpInterceptor.factory.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import router module
    #}
    {% javascripts debug=false output='js/website/app/blocks/router.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/router/router.module.js'
    '@IcapWebsiteBundle/Resources/public/js/blocks/router/routeHelper.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import utilities module
    #}
    {% javascripts debug=false output='js/website/app/components/utilities.js'
    '@IcapWebsiteBundle/Resources/public/js/components/utilities/utilities.module.js'
    '@IcapWebsiteBundle/Resources/public/js/components/utilities/utilities.service.js'
    '@IcapWebsiteBundle/Resources/public/js/components/utilities/iframeHeightOnLoad.directive.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import resource picker module
    #}
    {% javascripts debug=false output='js/website/app/components/resourcePicker.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resourcePicker/resourcePicker.module.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resourcePicker/resourcePicker.config.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resourcePicker/resourcePicker.directive.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/vendor/angular-ui/ui-tree/angular-ui-tree.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/vendor/angular-ui/multi-level-push-menu/pushmenu.js') }}"></script>
    {#
        Import flexnav module
    #}
    {% javascripts debug=false filter='jsmin' output='js/website/components/flexnav.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/flexnav.module.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/flexnav-options.service.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/flexnav-utils.service.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/flexnav.directive.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/flexnav-submenu.directive.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/templates/main_menu.tpl.js'
    '@IcapWebsiteBundle/Resources/public/js/components/flexnav/templates/sub_menu.tpl.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import resizer component
    #}
    {% javascripts debug=false filter='jsmin' output='js/website/app/components/resizer.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resizer/resizer.module.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resizer/resizer.directive.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resizer/resizerBottom.directive.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resizer/resizerRight.directive.js'
    '@IcapWebsiteBundle/Resources/public/js/components/resizer/changeHeight.directive.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import app module
    #}
    {% javascripts debug=false filter='jsmin' output='js/website/app/app.edit.js'
    '@IcapWebsiteBundle/Resources/public/js/edit-app/app.js'
    '@IcapWebsiteBundle/Resources/public/js/edit-app/app.config.js'
    '@IcapWebsiteBundle/Resources/public/js/app.bootstrap.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {#
        Import website tree component
    #}
    {% javascripts debug=false filter='jsmin' output='js/website/app/websiteTree.js'
    '@IcapWebsiteBundle/Resources/public/js/edit-app/websiteTree/websiteTreeNode.service.js'
    '@IcapWebsiteBundle/Resources/public/js/edit-app/websiteTree/websiteTree.service.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/edit-app/websiteOptions/websiteOptions.service.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/edit-app/main.controller.js') }}"></script>

    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/templates/menu_renderer.tpl.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/icapwebsite/js/templates/tree_renderer.tpl.js') }}"></script>

    <script type="text/javascript" src="{{ url('bazinga_jstranslation_js', { 'domain': 'icap_website' }) }}"></script>
{% endblock %}