{% extends 'ClarolineCoreBundle::layout.html.twig' %}

{% block title %}{{ portfolio.user.firstName ~ ' ' ~ portfolio.user.lastName ~ ' - ' ~ 'portfolio' | trans({}, 'icap_portfolio') ~ ' - ' ~ titleWidget.title | striptags | raw }}{% endblock %}

{% set viewMode = (constant('Icap\\PortfolioBundle\\Manager\\PortfolioManager::PORTFOLIO_OPENING_MODE_VIEW') == openingMode) %}
{% set editMode = (constant('Icap\\PortfolioBundle\\Manager\\PortfolioManager::PORTFOLIO_OPENING_MODE_EDIT') == openingMode) %}

{% block content_container %}
    <div id="portfolio-section" data-portfolio-container="{{ portfolio.id }}">
        <div id="portfolio-container"{% if not viewMode %} data-ng-if="portfolio.$resolved"{% endif %}>
            <header>
                <div class="row container">
                    <div class="col-md-offset-2">
                        <h1 id="username">{{ portfolio.user.firstName ~ ' ' ~ portfolio.user.lastName }}</h1>
                        {% if not viewMode %}
                            <div data-ng-repeat="widget in widgets | filter:{type: 'title'} track by widget.id" data-ng-show="widgets.length > 0">
                                <div class="portfolio-title-container{% if not editMode %} margin{% endif %}" data-widget>
                                    <div class="portfolio-title" data-ng-bind-html="widget.views.view" data-ng-show="!widget.editing && !widget.views.form"></div>
                                    <div class="widget-actions">
                                    {% if editMode %}
                                        <button class="widget-action btn btn-sm btn-primary" data-ng-click="edit(widget);"
                                                data-ng-if="!widget.isEditing()">
                                            <span class="fa fa-pencil"></span>
                                        </button>
                                    {% endif %}
                                    </div>
                                    <div class="loading" data-ng-show="widget.editing && !widget.views.form"></div>
                                    <form name="form" class="edit-container form-inline widget-panel" data-loading-form="save(widget)" data-ng-show="widget.editing && widget.views.form">
                                        <div data-bind-html="widget.views.form" class="form-group"></div>
                                        <button type="submit" class="btn btn-md btn-primary">{{ 'save'|trans({}, 'platform') }}</button>
                                        <button type="button" class="btn btn-md btn-default" data-ng-click="cancelEdition(widget)">{{ 'cancel'|trans({}, 'platform') }}</button>
                                    </form>
                                </div>
                            </div>
                        {% else %}
                            <div class="portfolio-title-container margin">
                                <div class="portfolio-title">
                                    {% include 'IcapPortfolioBundle:templates:title.html.twig' with {'widget': titleWidget} only %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </header>
            <section class="col-md-12">
                {% if not viewMode %}
                <div class="communication_panel_container col-md-5">
                    <div class="communication_panel_toggle" data-ng-init="displayComment=false" data-ng-class="{'expanded': displayComment}">
                        <button class="btn btn-default btn-sm" data-ng-click="updateCountViewComments()" data-ng-class="{'info': 0 < portfolio.unreadComments}">
                            {{ 'communication_panel' | trans({}, 'icap_portfolio') }}
                            <span class="badge" data-ng-show="0 < portfolio.unreadComments">{% verbatim %}{{ portfolio.unreadComments }}{% endverbatim %}</span>
                            <span class="fa" data-ng-class="{'fa-chevron-down': displayComment, 'fa-chevron-up': !displayComment}"></span>
                        </button>
                    </div>
                    <div class="panel panel-default communication_panel nghide" data-comments-container="portfolio.comments" data-ng-class="{'nghide': !displayComment}">
                        <div class="panel-heading">
                            {{ 'communication_panel' | trans({}, 'icap_portfolio') }}
                            <a href="{{ path('icap_portfolio_comments_list', {'portfolioSlug': titleWidget.slug}) }}"
                               title="{{ 'see_all_exchange'|trans({}, 'icap_portfolio') }}" class="pull-right text-muted fa fa-share">
                                {{ 'see_all_exchange'|trans({}, 'icap_portfolio') }}</a>
                        </div>
                        <div class="panel-body">
                            <ul class="media-list" data-scroll-container>
                                {% verbatim %}
                                <li class="media" data-ng-repeat="comment in comments | orderBy:['+date']">
                                    <div class="media-body">
                                        <p class="message" data-ng-bind-html="comment.message"></p>
                                        <p class="pull-right author" data-ng-if="comment.date">
                                            <small>{{ comment.sender.lastName }} {{ comment.sender.firstName }}, <span class="fa fa-calendar"></span> {{ comment.date|date : ('comment_date_format'|trans) }}</small>
                                        </p>
                                        <p class="pull-right author loading" data-ng-if="!comment.date">
                                        </p>
                                    </div>
                                </li>
                                {% endverbatim %}
                                <li class="media media-empty" ng-show="!comments.length">
                                    <div class="media-body">
                                        <p class="message">{{ 'no_comments'|trans({}, 'icap_portfolio') }}</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="panel-footer">
                            <form class="form" data-ng-submit="create()">
                                <p class="comment_field">
                                    <label for="portfolioComment">Commentaire</label><button type="submit" class="btn btn-primary btn-xs pull-right">{{ 'comment_send'|trans({}, 'icap_portfolio') }}</button>
                                    <textarea ui-tinymce="tinyMceConfig" class="form-control" rows="3" name="comment[message]" data-ng-model="message"></textarea>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="main-content col-md-10 col-md-offset-1"{% if viewMode %} data-ng-controller="viewCtrl"{% endif %}>
                    {% if not viewMode %}
                        {% if editMode %}
                        <div data-ng-include="'templates/menu_widget-type.tpl.html'">
                        </div>
                        {% endif %}
                        <p class="no-data well" data-ng-show="widgets.length <= 1">
                        {% if editMode %}
                            {{ 'no_widget'|trans({}, 'icap_portfolio')|raw }}
                        {% else %}
                            {{ 'portfolio_empty'|trans({}, 'icap_portfolio')|raw }}
                        {% endif %}
                        </p>
                        <ul class="list-unstyled" data-gridster="gridsterOptions">
                            <li data-gridster-item="widget" data-ng-repeat="widget in widgets | filter:{type: '!title'} | orderBy:'+row +col' track by widget.id">
                                {% include 'IcapPortfolioBundle:templates:widget.html.twig' %}
                            </li>
                        </ul>
                    {% else %}
                            <ul class="list-unstyled ng-cloak" data-gridster="gridsterOptions" data-ng-show="widgets.length">
                                <li data-gridster-item="widget" data-ng-repeat="widget in widgets | filter:{type: '!title'} | orderBy:'+row +col' track by widget.id">
                                    <div class="panel panel-default widget-panel">
                                        <div class="panel-heading">
                                            {% verbatim %}{{ widget.label }}{% endverbatim %}
                                        </div>
                                        <div class="panel-body">
                                            <div data-ng-bind-html="widget.views.view"></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <p class="no-data well ng-cloak" data-ng-show="!widgets.length">{{ 'portfolio_empty'|trans({}, 'icap_portfolio') }}</p>
                            <div class="well" data-ng-show="!widgets"><p class="loading loading_view"></p></div>
                    {% endif %}
                </div>
            </section>
        </div>

        {% if not viewMode %}
            <div data-ng-show="!portfolio.$resolved" id="portfolio-loading"></div>
        {% endif %}
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets debug=false filter='lessphp, cssmin'  output='css/icapportfolio/style_view.css'
      "@IcapPortfolioBundle/Resources/views/less/portfolio.less"
      "@IcapPortfolioBundle/Resources/views/less/interface.less"
      "bundles/frontend/jquery/plugin/datepicker/css/datepicker.css"
      "bundles/icapportfolio/css/angular-motion/angular-motion.min.css"
      "bundles/icapportfolio/css/angular-gridster/angular-gridster.less"
    %}
        <link rel="stylesheet" href="{{ asset_url }}" screen="media" />
    {% endstylesheets %}
{% endblock %}

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

    {% if not viewMode %}
        <script type="text/javascript">
            'use strict';
            (function() {
                window.widgetsConfig = '{{ widgetsConfig|json_encode()|raw }}';
                window.resourceTypes = {
                    {% for resourceType in resourceTypes %}
                        "{{ resourceType.getName() }}": {
                            "name": "{{ resourceType.getName()|trans({}, 'resource') }}"
                        }{% if loop.last != true %},{% endif %}
                    {% endfor %}
                };
                window.assetPath = "{{ asset('') }}";
            })();
        </script>

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

        {% if 'en' != app.request.locale %}
            <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/datepicker/js/locales/bootstrap-datepicker.' ~ app.request.locale ~ '.js') }}"></script>
        {% endif %}

        {% javascripts debug=true output='js/portfolio/portfolio/vendor.js'
            '@ClarolineCoreBundle/Resources/public/js/tinymce/tinymce.js'
            '@IcapBadgeBundle/Resources/public/js/badge_picker.js'
            '@StfalconTinymceBundle/Resources/public/vendor/tinymce/tinymce.jquery.min.js'
            '@StfalconTinymceBundle/Resources/public/vendor/tinymce/jquery.tinymce.min.js'
            '@FrontEndBundle/Resources/public/jquery/plugin/confirm-bootstrap/confirm-bootstrap.js'
            '@FrontEndBundle/Resources/public/jquery/plugin/datepicker/js/bootstrap-datepicker.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular.min.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular-resource.min.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular-sanitize.min.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular-animate.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-ui/ui-tinymce/tinymce.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/moment.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/dateTimeInput.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-strap/dimensions.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-strap/tooltip.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-strap/tooltip.tpl.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-strap/popover.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-strap/popover.tpl.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/javascript-detect-element-resize/jquery.resize.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-gridster/angular-gridster.js'
        %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}

        {% javascripts debug=true filter='jsmin' output='js/portfolio/portfolio/script.js'
            '@IcapPortfolioBundle/Resources/public/js/utils/Array.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/portfolioApp.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/controllers/portfolioController.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/controllers/widgetController.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/controllers/collectionFormController.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/controllers/commentController.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/portfolioFactory.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/portfolioManager.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/widgetsManager.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/widgetsConfig.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/widgetFactory.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/commentsManager.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/services/commentFactory.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/widgetDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/portfolioDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/bindHtmlDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/loadingFormDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/confirmClickDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/collectionFormDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/resourcePickerDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/datepickerDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/badgePickerDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/directives/commentsDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/modules/translation.js'
            '@IcapPortfolioBundle/Resources/public/js/modules/urlInterpolator.js'
            '@IcapPortfolioBundle/Resources/public/js/modules/scrollContainerDirective.js'
            '@IcapPortfolioBundle/Resources/public/js/portfolio/templates/menu_widget-type.tpl.js'
        %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% else %}
        {% javascripts debug=true output='js/portfolio/portfolio/vendor_view.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular.min.js'
            '@InnovaAngularJSBundle/Resources/public/js/angular-sanitize.min.js'
            '@IcapPortfolioBundle/Resources/public/js/vendor/angular-gridster/angular-gridster.js'
        %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
        <script type="text/javascript">
            'use strict';
            (function() {
                var viewApp = angular.module('viewApp', ['ngSanitize', 'gridster']);

                // Bootstrap portfolio application
                angular.element(document).ready(function() {
                    angular.bootstrap(document, ['viewApp'], {strictDi: true});
                });

                viewApp.controller('viewCtrl', ['$scope', function ($scope) {
                    $scope.gridsterOptions = {
                        columns:    8, // the width of the grid, in columns
                        swapping:   true, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
                        floating:   true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
                        margins:    [10, 10], // the pixel distance between each widget
                        minColumns: 1, // the minimum columns the grid must have
                        minRows:    1, // the minimum height of the grid, in rows
                        maxRows:    100,
                        resizable: {
                            enabled: false
                        },
                        draggable: {
                            enabled: false
                        }
                    };

                    $scope.widgets = {{ widgets|json_encode()|raw }};
                }]);
            })();
        </script>
    {% endif %}
{% endblock %}